div+css+jq鼠标靠近导航背景动画般滑动导航条殊效，鼠标移动到导航条对应栏目称谓背景疾速从此外栏目称呼滑动到对应鼠标抉择的俗称栏目，如动画般滑动效果殊效。

css动画般滑动导航条特效效果截图

 个性此css div jq特效可用于企业小我等网站导航，配景滑动造诣腻滑俊俏，如水动般效果。

症结HTML代码：

1. <div class="nav">
2.     <div id="navSelected" class="navSelected"></div>
3.     <ul id="navBd" class="clearfix">
4.       <li id="navCurr" class="navHover"> <a href="//www.css5.com.cn/">CSS5</a></li>                     
5.         <li><a href="#">web建立</a></li>
6.         <li><a href="#">站点维护</a></li>
7.         <li><a href="#">站点改版</a></li>
8.         <li><a href="#">网站美化</a></li>
9.         <li><a href="#">得胜案例</a></li>
10.         <li><a href="#">思空见贯问题</a></li>
11.     </ul>
12. </div>

对应CSS代码：

1. .clearfix:after{visibility: hidden; display: block; clear: both;  height: 0; font-size: 0; content: ".";} 
2. .clearfix{zoom:1;} 
3.  
4. .nav {position:relative;width:700px;height:38px;overflow:hidden; line-height:38px;font-size:14px;margin:40px auto 0 auto;} 
5. .nav li{float:left;display:inline;width:100px;height:39px;  line-height:34px;text-align:center;} 
6. .nav a:hover{text-decoration:none;} 
7. #navBd{position:relative;} 
8. .navHover a{display:inline-block;color:#fff;} 
9. #navSelected{position:absolute;top:0;width:100px;height:39px;  ine-height:33px;bac公斤round:url(images/header.png) no-repeat  0 0;} 

JQ新写JS代码：

1. <script type="text/javascript">
2. $(function(){ 
3.  
4.     //擦除成果 
5.     jQuery.extend(jQuery.easing, 
6.         { 
7.             easeOutBack: function (x, t, b, c, d, s) { 
8.                 ss = s || 1.3; 
9.                 return c*((tt=t/d-1)*t*((s+1)*t + s) + 1) + b; 
10.         } 
11.     }); 
12.      
13.     //nav初始化选中 
14.     var navCurr = $("#navCurr"); 
15.     $("#navSelected").css("left", navCurr[0].offsetLeft); 
16.      
17.     //nav里的链接hover成果 
18.     $("#navBd li").hover(function(){ 
19.             if(!!$("#navSelected").stop(true).animate({left:$(this)[0].offsetLeft}, 400, "easeOutBack")) { 
20.                 $(this).siblings().removeClass("navHover").end().addClass("navHover"); 
21.                 $(this).find("a").hide().fadeIn(300); 
22.             } 
23.              
24.         }, function(){ 
25.             $(this).removeClass("navHover"); 
26.             $("#navCurr").addClass("navHover"); 
27.             //window.setTimeout(function(){$("#navCurr").parent().addClass("navHover")},100); 
28.             $("#navSelected").stop(true).animate({left:navCurr[0].offsetLeft}, 300, "easeOutBack"); 
29.         } 
30.     ); 
31.  
32. }) 
33. </script>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-texiao/texiao52361.shtml