效果图:
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>