jQuery弹性滑动导航菜单-jQuery效果

分类：Javascript| 发布：camnprbubuol| 查看：481 | 发表时间：2013/4/24

例子截图：

HTML代码如下：

1<div id="nav">
2  <div class="nav-menu">
3      <a href="#" class="current">首页</a>
4      <a href="#">关于Camnpr</a>
5        <a href="#">案例展示</a>
6        <a href="#">联系方式</a></div>
7  <div class="nav-current"> </div></div>

CSS代码如下：

1body{ font-size:100%; font-family:"Microsoft YaHei","Arial"; background:#fff;}
2#nav{ position:relative; width:573px; _width:576px; margin:100px auto 0 auto; border-bottom:2px #ddd solid;}
3#nav .nav-menu{ height:50px;}
4#nav .nav-menu a{ display:block; float:left; height:50px; padding:0 40px; line-height:50px; color:#666; font-size:16px; text-decoration:none;}
5#nav .nav-current{ position:absolute; bottom:-2px; height:2px; overflow:hidden; background:#80b600;}

JS代码如下：

请先引用jQuery，例如：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 具体可以查看：如何调用谷歌Jquery

01$(function(){
02(function(){
03var $navcur = $(".nav-current");
04var $nav = $("#nav");
05var current = ".current";
06var itemW = $nav.find(current).innerWidth(); //默认当前位置宽度
07var defLeftW = $nav.find(current).position().left;    //默认当前位置Left值
08 
09//添加默认下划线
10$navcur.css({width:itemW,left:defLeftW});
11 
12//hover事件
13$nav.find("a").hover(function(){
14    var index = $(this).index();    //获取滑过元素索引值
15 var leftW = $(this).position().left;    //获取滑过元素Left值
16   var currentW = $nav.find("a").eq(index).innerWidth();   //获取滑过元素Width值
17  $navcur.stop().animate({
18        left: leftW,
19        width: currentW
20 },300);
21 
22 },function(){
23   $navcur.stop().animate({
24        left: defLeftW,
25     width: itemW
26    },300)
27})
28})();
29 
30});