js实现滑动的弹性导航

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js实现滑动的弹性导航</title>
<style type="text/css">
body,ul,li { margin:0; padding:0; }
ul { list-style:none; }
.box { background-color:#1a1a1a; margin-top:20px; }
.nav { width:1000px; height:45px; margin:0 auto; position:relative; }
.nav li { float:left; width:100px; line-height:45px; position:relative; z-index:2;  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:0; left:0; }
</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=0; i<aLink.length; i++){
        aLink[i].onmouseover = function(){
            startMove(oMask, this.offsetLeft);
        }
    }
}

var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        iSpeed += (iTarget-obj.offsetLeft)/5;
        iSpeed *= 0.7;
        left += iSpeed;
        if(Math.abs(iSpeed)<1 && Math.abs(iTarget-left)<1){
            clearInterval(obj.timer);
            obj.style.left = iTarget+"px";
        }else{
            obj.style.left = left+"px";
        }
    }, 30);
}
</script>
</body>
</html>

 

 

 

 

 

 

 

posted @ 2013-07-08 16:54  赵小磊  阅读(524)  评论(0)    收藏  举报
回到头部