Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan kesan Flash membalik ke atas dan ke bawah menu navigasi Cina dan Inggeris code_jquery
Contoh dalam artikel ini menerangkan kod menu navigasi Cina dan Inggeris yang melaksanakan kesan Flash dengan jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah pelaksanaan jQuery menu navigasi flip sensitif tetikus dengan kesan Flash Ia menyokong penukaran antara bahasa Cina dan bahasa Inggeris Versi perpustakaan kelas jQuery yang digunakan ialah 1.3.2.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/jquery-flash-style-sx-cha-chen-menu-codes/
Kod khusus adalah seperti berikut:
<!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> <title>jQuery仿Flash鼠标感应式翻动的导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{width:100%;height:100%;margin:0;padding:0;background:url(images/bg.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;} .index_top{width:930px;height:126px;position:relative;z-index:1;} no-repeat 0 0;position:absolute;top:46px;left:41px;z-index:50;} #index_nav{margin:82px 0;float:left;display:inline;} #index_nav ul{float:left;height:34px;display:inline;margin:0 0 0 0px;list-style-type:none;} #index_nav 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;} #index_nav li div{height:34px;width:100px;overflow:hidden;position:relative;} #index_nav li div .n1,#index_nav li div .n2{display:block;height:34px;width:100px;position:absolute;top:0px;left:0px;cursor:pointer;} #index_nav li div .n1{z-index:12;background:url(images/nav_bg.gif) repeat-x top center;font-size:13px;} #index_nav li div .n2{z-index:11;background:url(images/nav_bg.gif) repeat-x top center;} #index_nav li div a{color:#fff;} #index_nav li div a:hover{text-decoration:none;} </style> <script type="text/javascript" src="jquery1.3.2.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('#index_nav li').hover( function(){ jQuery(this).find('.n1').stop().animate({opacity:'0',top:'43px'}); }, function(){ jQuery(this).find('.n1').stop().animate({opacity:'1',top:'0px'}); } ); }); </script> </head> <body> <span style="color:#FFFFFF;"> 友情提示:若提示网页有错或看不到效果,请刷新网页后再试!</span><br> <div id="body"> <div id="index_content"> <div class="index_top"> <div id="index_nav"> <ul> <li id="index_nav_about"><div><span class="n1">关 于</span><span class="n2">About</span></div></li> <li id="index_nav_service"><div><span class="n1">服 务</span><span class="n2">Services</span></div></li> <li id="index_nav_cases"><div><a href="#"><span class="n1">案 例</span><span class="n2">Cases</span></a></div></li> <li id="index_nav_adva"><div><span class="n1">优 势</span><span class="n2">Advantages</span></div></li> <li id="index_nav_contact"><div><span class="n1">联 系</span><span class="n2">Contact</span></div></li> </ul> </div> </div> </div> </div> </body> </html>
Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.