CSS手册CSS3手册Edu网闻
欢迎来到thinkcss查找CSS资料与学习DIV CSS布局技术!
您的位置:ThinkCSS首页 > CSS特效 >

div css jq背景动画般滑动效果网站导航条特效

div+css+jq鼠标靠近导航背景动画般滑动导航条特效,鼠标移动到导航条对应栏目名称背景快速从其它栏目名称滑动到对应鼠标选择的名称栏目,如动画般滑动效果特效。

css动画般滑动导航条特效效果截图
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="http://www.thinkcss.com/">ThinkCSS</a></li>                     
  5.         <li><a href="#">网站建设</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;background: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> 

当然以上代码包括JQ文件、图片素材、HTML文件、CSS文件等都将给完整打包后供大家下载。

在线演示

查看案例

打包下载

以上供大家免费浏览演示与免费下载,jq css导航条背景滑动动画般效果特效篇。

如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/css-texiao/texiao791.shtml

CSS基础教程 CSS Based Tutorial

HTML基础教程 HTML Based Tutorial

CSS教程文章修订日期:2016-02-17 23:10 ThinkCSS整理 css。