<style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #div{
                position: absolute;
                left: 0;
                width: 102px;
                height: 5px;
                background: black;
            }
            #ul{
                height: 52px;
                width: 450px;
                list-style: none;            
            }
            #ul li{
                float: left;
                width: 100px;
                border-top: 1px black solid;
                border-bottom: 1px black solid;
                height: 50px;
                line-height: 50px;
                text-align: center;
            }
        </style>

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<div id="div"></div>

<script type="text/javascript" src="tween.js"></script>
<script type="text/javascript">
    var div=document.querySelector("#div");
    var ul=document.querySelector("#ul");
    var li=document.querySelectorAll("#ul li");
    var _width=div.offsetWidth;
    console.log(_width);
    for(i=0;i<4;i++){
        li[i].index=i;
        li[i].onmouseover=function(){  
        var start=div.offsetLeft;
            var startStep=0;
        var change=_width*this.index-div.offsetLeft;
        var endStep=100;
        var timer=setInterval(function(){
                startStep++;
        if(startStep>=endStep){
            clearInterval(timer);
        }
                    div.style.left=Tween.Linear(startStep,start,change,endStep)+"px";
        },.1)
        }
    }
</script>