妙味——弹性运动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
ul{width:400px;height: 30px;position: relative;margin: 100px auto 0;}
li{float: left;width: 98px;height: 28px;line-height: 28px;border: 1px solid #ccc;text-align: center;z-index: 2;position: relative;cursor: pointer;}
.bg{width: 100px;height: 5px;overflow: hidden;background: red;border: none;position: absolute;top: 24px;left: 0;z-index: 1;}
</style>
<script>
window.onload=function(){
    var oUl=document.getElementById('ul1');
    var aLi=oUl.getElementsByTagName('li');
    var oBg=aLi[aLi.length-1];
    var i=0;

    for(i=0;i<aLi.length-1;i++){
        aLi[i].onmouseover=function(){
            startMove(oBg,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(left-iTarget)<1)
        {
            clearInterval(obj.timer);
            obj.style.left=iTarget+'px';
        }
        else
        {
            obj.style.left=left+'px';
            // document.title=obj.offsetLeft+' / '+iTarget+' / '+iSpeed;
        }
    },30);
};

</script>
</head>
<body>
    <ul id="ul1">
        <li>首页</li>
        <li>关于我们</li>
        <li>产品</li>
        <li>联系方式</li>
        <li class="bg"></li>
    </ul>
</body>
</html>
效果如下图所示：
高否？富否？帅否？否？滚去学习！