滑动导航条

之前在网站上看到滑动导航条，一直想自己也做一个类似的，今天心血来潮，终于下决心自己来做出来一个。废话不多说，直接贴代码：写出这样的效果要知道position() , width()函数要理解才可以做出来。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动导航条</title>
<script scr=""></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
<style>
* {
margin:0;
padding:0;
}
.nav {
80%;
height:50px;
background-color:pink;
margin:100px auto;
text-align:center;
line-height:50px;
position:fixed;
left:0;
right:0;
}
.nav a {
text-decoration: none;
color:#000;
display:inline-block;
padding:0 10px;

 

}
#navslip {
position: absolute;
height:2px;
background-color: #8f919e;
/* 100px;*/
left:0;
bottom:0;
display:none;

}

 

</style>
</head>
<body>
<div class="nav"> 
<a href="http://baidu.com" target="_black" style='background-color: red;'>百度</a> 
<a href="http://sina.com" target="_black" style='background-color: green;'>新浪</a> 
<a href="http://58.com" target="_black" style='background-color: yellow;'>58同城</a> 
<a href="http://sentsin.com/message/" target="_black" title="留言" style='background-color: blue;'>致时光</a> 
<a href="http://sentsin.com/daohang/" target="_black" style='background-color: purple;'>前端圈</a> 
<i id="navslip"></i> 
</div> 
<script type="text/javascript">
$(document).ready(function(){
setSlip();

});

var setSlip = function(){

 

var slip = $('#navslip');
var a = $('.nav a:first');
// 初始化滑块
slip.css({
"width" : a.width()+20+"px",
"left" : parseInt(a.position().left)+'px'

});


$('.nav a').mouseenter(function(){
if(slip.css('display') == 'none'){
slip.show(); 
}
//移动滑块
slip.stop().animate({
"width" : $(this).width()+20+"px",
"left" : parseInt($(this).position().left)+"px"

 

},500)

 

})

}

</script> 
</body>
</html>