【每日一练】JQuery nav导航

效果图：

js:

 1 $.fn.extend({
 2     navHover:function(){
 3         var $me=$(this),//当前对象
 4             $hoer=$("dt",$me),
 5             _w=$("dd",$me).outerWidth(),
 6             curr=$("dd",$me).index($me.find("dd.curr"));//得到当前选中位置的索引
 7         $("dd",$me).bind("mouseenter",function(){            
 8             var _this=$(this),
 9                 _index=_this.index();                
10             //设置浮动显示值
11             $("a",$hoer).attr("href",$("a",_this).attr("href"));
12             $("a span",$hoer).html($("a",_this).attr("title"));
13             //动画
14             $hoer.stop().animate({left:_index*_w},300,function(){
15                 $("a",_this).addClass("hover")
16             });
17         }).bind("mouseleave",function(){            
18             var _this=$(this),
19                 _def=$me.find("dd:eq("+curr+")");
20             //设置浮动显示值
21             $("a",$hoer).attr("href",$("a",_def).attr("href"));
22             $("a span",$hoer).html($("a",_def).attr("title"));
23             $("a",_this).removeClass("hover");
24             //还原到初始值
25             $hoer.stop().animate({left:curr*_w},300);
26         });
27     }
28 });

css:

/* 导航 */
#navwraper{ height:41px; position:relative; z-index:49; background:url(../images/nav_bg.png) repeat-x}
#nav { height:41px;width:980px; position:relative;margin: 0px auto;}
#nav dd,#nav dt { float:left; height:41px; width:95px; position:relative; }
#nav dd a{ display:block; width:95px; line-height:41px; height:41px;font-size: 12px; text-align:center; color:#fff; text-shadow:-1px -1px 0 #21546d; color:#fff; cursor:pointer;}
#nav dd a.hover { text-shadow:-1px -1px 0 #9a5a17;font-weight:bold; }
#nav dt{ position:absolute; z-index:-1; left:0; top:0; width:95px; background:url(../images/navhover.gif) no-repeat 0 0; text-shadow:-1px -1px 0 #9a5a17; }
#nav dt a span { text-align:center; line-height:41px; display:none; color:#fff; float:left; width:95px; }
#nav dt a em { background:url(../images/navhover.gif) no-repeat right 0; display:block; width:2px; height:41px; position:absolute; right:0; top:0;}

html:

 1 <!--start:nav导航-->
 2 <div id="navwraper">
 3     <dl id="nav">
 4             <dd class="curr"><a href="javascript:void(0);" title="首页">首 页</a></dd>
 5             <dd class=""><a href="javascript:void(0);" title="Jquery插件">Jquery插件</a></dd>            
 6             <dd class=""><a href="javascript:void(0);" title="Jquery学堂">Jquery学堂</a></dd>
 7             <dd class=""><a href="javascript:void(0);" title="学习资料库">学习资料库</a></dd>     
 8             <dd class=""><a href="javascript:void(0);" title="热门标签">热门标签</a><b></b></dd>        
 9             <dd class=""><a href="javascript:void(0);" title="QQ群堂">QQ群堂</a></dd>                  
10             <dd class=""><a href="javascript:void(0);" title="在线留言">在线留言</a></dd>   
11             <dd><a href="javascript:void(0);" title="友情赞助" target="_blank">友情赞助</a><b></b></dd>
12             <dt><a href="javascript:void(0);"><span>首 页</span><em></em></a></dt>
13     </dl>
14 </div>
15 <!--end:nav导航-->　

调用：

<script type="text/javascript">
    $(function(){
        $("#nav").navHover(); 
    })
</script>

 demo下载