弹性运动

1、弹性运动

html、css代码：

    <div></div>
    <span></span> //以span为目标点进行弹性运动
    
        div{
            width:100px;
            height:100px;
            background-color: red;
            position:absolute;
            left:0px;
            top:0;
        }
        span{
            position: absolute;
            width:1px;
            height:100px;
            background-color:black;
            left:300px;
            top:0;
        }

js代码：

        var timer = null;
        function startMove(dom,target){
            clearInterval(timer);
            var iSpeed = 0;//定义初速度
            var a = 3;  //定义加速度
            var u = 0.8;
            timer = setInterval(function(){
                a = (target - dom.offsetLeft)/5; //距离目标点越近，加速度越小，越远加速度越大（与缓冲运动处理方式相同）
                iSpeed += a;
                iSpeed *= u;
                //弹性物体停止条件是速度为0且物体停在目标点上
                //近似把绝对值小于1 看成是速度为0
                if(Math.abs(iSpeed) < 1 && Math.abs(target - dom.offsetLeft) < 1){
                    clearInterval(timer);
                    dom.style.left == target + 'px';
                }else{
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }
            },30)
        }

2、弹性运动案例

html、css代码：

    <ul>
        <li class="content"></li>
        <li class="content"></li>
        <li class="content"></li>
        <li class="content"></li>
        <li class="bg"></li>
    </ul>

       *{
            padding:0;
            margin:0;
            list-style:none;
        }
        ul{
            width:800px;
            height:100px;
            border:1px solid black;
            margin:100px auto;
            position:relative;
        }
        ul .content{
            width:198px;
            height:98px;
            background-color:orange;
            float:left;
            border:1px solid black;

        }
        ul .bg{
            position:absolute;
            width:200px;
            height:100px;
            background-color:hotpink;
            opacity:0.5;
        }

js代码：

        var oLiArray = document.getElementsByTagName('li');
        var oLibg = oLiArray[oLiArray.length - 1];  //获取bg
        
        for(var i = 0; i < oLiArray.length - 1; i++){
            oLiArray[i].onmouseenter = function(){//鼠标碰到某一个li就调用startMove
                startMove(oLibg,this.offsetLeft);  //让bg进行运动，运动到li当前位置上
            }
        }
        var timer = null;
        function startMove(dom,target){
            clearInterval(timer);
            var iSpeed = 0;
            var a = 3;
            var u = 0.8;
            timer = setInterval(function(){
                a = (target - dom.offsetLeft)/5;
                iSpeed += a;
                iSpeed *= u;
                //弹性物体停止条件是速度为0且物体停在目标点上
                //近似把绝对值小于1 看成是速度为0
                if(Math.abs(iSpeed) < 1 && Math.abs(target - dom.offsetLeft) < 1){
                    clearInterval(timer);
                    dom.style.left == target + 'px';
                }else{
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }
            },30)
        }