【每日一练】JQuery nav导航

效果图：

js:

$.fn.extend({
    navHover:function(){
        var $me=$(this),//当前对象
            $hoer=$("dt",$me),
            _w=$("dd",$me).outerWidth(),
            curr=$("dd",$me).index($me.find("dd.curr"));//得到当前选中位置的索引
        $("dd",$me).bind("mouseenter",function(){            
            var _this=$(this),
                _index=_this.index();                
            //设置浮动显示值
            $("a",$hoer).attr("href",$("a",_this).attr("href"));
            $("a span",$hoer).html($("a",_this).attr("title"));
            //动画
            $hoer.stop().animate({left:_index*_w},300,function(){
                $("a",_this).addClass("hover")
            });
        }).bind("mouseleave",function(){            
            var _this=$(this),
                _def=$me.find("dd:eq("+curr+")");
            //设置浮动显示值
            $("a",$hoer).attr("href",$("a",_def).attr("href"));
            $("a span",$hoer).html($("a",_def).attr("title"));
            $("a",_this).removeClass("hover");
            //还原到初始值
            $hoer.stop().animate({left:curr*_w},300);
        });
    }
});

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:

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

调用：

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

 demo下载