正文
js实现滑动的弹性导航
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js实现滑动的弹性导航</title>
<style type="text/css">
body,ul,li { margin:; padding:; }
ul { list-style:none; }
.box { background-color:#1a1a1a; margin-top:20px; }
.nav { width:1000px; height:45px; margin: auto; position:relative; }
.nav li { float:left; width:100px; line-height:45px; position:relative; z-index:; text-align:center; }
.nav a { height:45px; display:block; color:#eee; font-size:14px; text-decoration:none; }
#mask { width:100px; height:45px; background-color:#028eec; position:absolute; top:; left:; }
</style>
</head><body><div class="box">
<div id="nav" class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">前端规范</a></li>
<li><a href="#">社区</a></li>
<li><a href="#">微笔记</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">网页制作</a></li>
<li><a href="#">设计动态</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">瀑布流</a></li>
<li><a href="#">移动页面</a></li>
</ul>
<div id="mask"></div>
</div>
</div><script type="text/javascript">
window.onload = function(){
var aLink = document.getElementById("nav").getElementsByTagName("li");
var oMask = document.getElementById("mask");
for(var i=; i<aLink.length; i++){
aLink[i].onmouseover = function(){
startMove(oMask, this.offsetLeft);
}
}
}var iSpeed = ;
var left = ;
function startMove(obj, iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
iSpeed += (iTarget-obj.offsetLeft)/;
iSpeed *= 0.7;
left += iSpeed;
if(Math.abs(iSpeed)< && Math.abs(iTarget-left)<){
clearInterval(obj.timer);
obj.style.left = iTarget+"px";
}else{
obj.style.left = left+"px";
}
}, );
}
</script>
</body>
</html>
