JS高级之弹性运动

一个运动的盒子，一个开始的按钮，一条终点线.，我设置这条线的原因是方便看出效果，也可以不设啦。

    <div class="box"></div>
    <input type="button" name="" value="开始">
    <div class="line"></div>

javaScript代码如下：

window.onload=function(){
            var btn=document.getElementsByTagName("input")[0];
            var box=document.getElementsByClassName("box")[0];
            btn.onclick=function(){
                startMove(box,700);
            }
            var timer=null;
            function startMove(elem,target){
                var speed=0;
                timer=setInterval(function(){
                    speed+=(target-elem.offsetLeft)/8;
                    speed*=0.7;
                    //我觉得0.7的效果好一点
                    if(Math.abs(speed)<1&&Math.abs(elem.offsetLeft-target)<1){
                        clearTimeout(timer);
                        elem.style.left=target+"px";//回到终点位置 
                    }else{
                        elem.style.left=elem.offsetLeft+speed+"px";
                    }
                },100)
            }
        }

为了使刚好在终点线的位置做弹性运动，传入参数target就是终点线距离盒子的位置。
例如这是我的css部分

        .box{
            position:absolute;
            top:40px;
            width: 100px;
            height: 100px;
            background-color:red;
        }
        .line{
            position:absolute;
            left:700px;
            top:0;
            width: 5px;
            height: 200px;
            background-color:#000;
        }