js实现跟随导航实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟随导航</title>
<script src="jqu/jq_3.3.1_mi.js"></script>
<style>
body{margin: 0;padding: 0;}
.box{
width: 100%;
background: #2e2e2e;
}
.nav{
width: 1200px;
height: 35px;
background: #2e2e2e;
margin: 0px auto;
position: relative;
}
.nav ul{
overflow: hidden;
margin: 0px;
padding: 0px;
}
.nav li{
list-style: none;
width: 120px;
float: left;
text-align: center;
}
.nav li a{
text-decoration: none;
color: #fff;
font-size: 14px;
line-height: 35px;
}
.top{
width: 120px;
height:2px;
background:#f60;
position: absolute;
z-index:99;
top:33px;
}
</style>
<script>
$(function(){
$('li').hover(
function(){
$v=parseInt($(this).attr('name'))*120;
$('.top').stop().animate({left:$v+'px'},300);
},
function(){
$('.top').stop().animate({left:'0px'},300);
}
)
})
</script>
</head>
<body>
<div class="box">
<div class="nav">
<ul>
<li name="0"><a href="">首页</a></li>
<li name="1"><a href="">关于我们</a></li>
<li name="2"><a href="">产品中心</a></li>
<li name="3"><a href="">技术支持</a></li>
<li name="4"><a href="">联系我们</a></li>
</ul>
<div class="top"></div>
</div>
</div>
</body>
</html>
