从智能社的blue老师公开课中学习到了很多,在此表示感谢。
这个导航很好玩,于是就想实现一个。
html
<div id="box">
<ul>
<li><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">内容</a></li>
<li><a href="javascript:void(0)">模板</a></li>
<li><a href="javascript:void(0)">招聘</a></li>
<li><a href="javascript:void(0)">介绍</a></li>
<li><a href="javascript:void(0)">成功</a></li>
<li><a href="javascript:void(0)">论坛</a></li>
<li><a href="javascript:void(0)">论坛</a></li>
<li><a href="javascript:void(0)">论坛</a></li>
<!--<li id="bgli"></li>-->
</ul>
</div>
css
* { padding: 0; margin: 0; }
#box { margin: 50px auto; height: 40px; background: #ccc; }
#box ul { position: relative; margin: 0 auto; width: 960px; }
#box li { float: left; margin-right: 0px; width: 100px; height: 40px; }
li { list-style: none; }
a { font-style: normal; position: relative; color: #efefef; text-align: center; line-height: 40px; text-decoration: none; display: block; z-index: 200 }
#bgli { position: absolute; background: red; border-radius: 10px; width: 70px; height: 40px; z-index: 100 }
js
!(function($){
$.fn.extend({
slider:function(sibling){
sibling.first().after("<li id='bgli'></li>")
$(this).hover(function(){
var nowleft = $(this).position().left;
var bjlileft = $("#bgli").position().left;
if(nowleft>bjlileft){
$("#bgli").stop().animate({left:nowleft+20
},300,function(){
$("#bgli").stop().animate({left:nowleft},100)
})
}else{
$("#bgli").stop().animate({left:nowleft-20
},300,function(){
$("#bgli").stop().animate({left:nowleft},100)
})
}
},function(){
$("#bgli").stop().animate({left:0})
return false;
})
}
})
})(jQuery);
//调用
$(function(){
var $li = $("#box>ul li");
$li.slider($li)
})
要先引入jq库哦