jQuery implements Flash effect flipping up and down Chinese and English navigation menu code

jQuery implements Flash effect flipping up and down Chinese and English navigation menu code_jquery

WBOY

Release： 2016-05-16 15:38:25

Original

1391 people have browsed it

The example in this article describes the Chinese and English navigation menu code that implements the Flash effect with jQuery. Share it with everyone for your reference. The details are as follows:

This is a jQuery implementation of a mouse-sensitive flip navigation menu with Flash effect. It supports switching between Chinese and English. The jQuery class library version used is 1.3.2.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-flash-style-sx-cha-chen-menu-codes/

The specific code is as follows:

<!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>

Copy after login

I hope this article will be helpful to everyone’s jQuery programming.