jquery仿flash效果中英文双语导航菜单鼠标感应翻动切换显示特效,当用户的鼠标经过时立即切换显示,可自定义。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <title>jquery鼠标感应中英文双语导航菜单切换显示_武鸣人</title> <style type="text/css"> body{width:100%;height:100%;margin:0;padding:0;background:url(/img/20240420_www_wuming_ren_1.gif) repeat-x top center;font-size:12px;color:#616161;} a,a:link,a:visited,a:active{color:#616161;text-decoration:none;} a:hover{text-decoration:underline;color:#710075;} #body{ width:100%;float:left;} .wuming_ren{width:930px;height:126px;position:relative;z-index:1;} no-repeat 0 0;position:absolute;top:46px;left:41px;z-index:50;} #nav_wuming_ren{margin:82px 0;float:left;display:inline;} #nav_wuming_ren ul{float:left;height:34px;display:inline;margin:0 0 0 0px;list-style-type:none;} #nav_wuming_ren li{float:left;height:34px;width:100px;font-size:13px;font-family:Verdana;line-height:34px;text-align:center;cursor:pointer;color:#fff;} #index_nav_cases a,#index_nav_cases a:link,#index_nav_cases a:visited,#index_nav_cases a:active{color:#fff;} #index_nav_cases a:hover{text-decoration:none;} #nav_wuming_ren li div{height:34px;width:100px;overflow:hidden;position:relative;} #nav_wuming_ren li div .n1,#nav_wuming_ren li div .n2{display:block;height:34px;width:100px;position:absolute;top:0px;left:0px;cursor:pointer;} #nav_wuming_ren li div .n1{z-index:12;background:url(/img/20240420_www_wuming_ren_2.gif) repeat-x top center;font-size:13px;} #nav_wuming_ren li div .n2{z-index:11;background:url(/img/20240420_www_wuming_ren_2.gif) repeat-x top center;} #nav_wuming_ren li div a{color:#fff;} #nav_wuming_ren li div a:hover{text-decoration:none;} </style> <script type="text/javascript" src="/img/jquery_wuming_ren.js"></script> <script type="text/javascript"> jQuery(function() { jQuery('#nav_wuming_ren li').hover( function() { jQuery(this).find('.n1').stop().animate({ opacity: '0', top: '43px' }); }, function() { jQuery(this).find('.n1').stop().animate({ opacity: '1', top: '0px' }); } );//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) }); </script> </head> <body> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <span style="color:#FF0000">需要加载js文件,请刷新页面后看效果!</span> <div id="body"> <div id="index_content"> <div class="wuming_ren"> <div id="nav_wuming_ren"> <ul> <li id="index_nav_about"><div><span class="n1">武鸣人一号</span><span class="n2">the first</span></div></li> <li id="index_nav_service"><div><span class="n1">武鸣人二号</span><span class="n2">the second</span></div></li> <li id="index_nav_cases"><div><a href="#"><span class="n1">武鸣人三号</span><span class="n2">the third</span></a></div></li> <li id="index_nav_adva"><div><span class="n1">武鸣人四号</span><span class="n2">the fourth</span></div></li> <li id="index_nav_contact"><div><span class="n1">武鸣人五号</span><span class="n2">the fifth</span></div></li> </ul> </div> </div> </div> </div> </body> </html>
本文来自武鸣人网站,转载请注明出处