js高级之运动系列（匀速运动/缓冲运动/弹性运动）

匀速运动

鼠标经过，匀速运动开始
css部分

*{
    margin: 0;
    padding: 0;
}
.box{
    position:relative;
    width:150px;
    height:150px;
    background-color: green;
    top:300px;
    left:-150px;
}
.box span{
    position:absolute;
    right:-20px;
    display:block;
    width:20px;
    background-color: red;
    top:50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}

布局

<div class="box">
    <span>匀速</span>
</div>

js代码

window.onload=function(){
    var box=document.getElementsByClassName("box")[0];
    box.onmouseover=function(){
        startMove(box,0);
    }
    box.onmouseout=function(){
        startMove(box,-150);
    }
}
var timer=null;
function startMove(obj,target){
    var speed=0;
    clearInterval(timer);
    timer=setInterval(function(){

        if(obj.offsetLeft<target){
            speed=10;
        }else{
            speed=-10;
        }
        if(obj.offsetLeft==target){
            clearInterval(timer);
        }else{
            obj.style.left=obj.offsetLeft+speed+"px";
        }

    },30);
}

简单缓冲运动并回到原点

布局部分，嘿嘿以简单为主。

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

css部分

body{
    padding: 0;
    margin: 0;
}
.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;
}

js代码

var btn=document.getElementsByTagName("input")[0];
    var box=document.getElementsByClassName("box")[0];
    var back=document.getElementsByTagName("input")[1];
    window.onload=function(){
        var timer=null;
        btn.onclick=function(){
        startMove(box,700);
        }
        //缓冲运动部分
        function startMove(elem,target){
            clearTimeout(timer);
            timer=setInterval(function(){
                var speed=(target-elem.offsetLeft)/10;
                speed=speed>0?Math.ceil((target-elem.offsetLeft)/10):Math.floor((target-elem.offsetLeft)/10);
                if(target==elem.offsetLeft){
                    clearTimeout(timer);
                }else{
                    elem.style.left=elem.offsetLeft+speed+"px";
                }
            },100)
        }
        back.onclick=function(){
            startMove(box,0);
        }
        //回到原点部分
        function backMove(elem,target){
            clearTimeout(timer);
            timer=setInterval(function(){
                var speed=Math.floor((target-elem.offsetLeft)/10);
                if(target==elem.offsetLeft){
                    clearTimeout(timer);
                }else{
                    elem.style.left=elem.offsetLeft+speed+"px";
                }
            },100)
        }
    }

弹性运动

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

<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;
}