基础运动

1、匀速运动

首先要给运动的标签一个定位；我们想控制一个物体运动，其实就是改变它的一个left、right、top、bottom坐标，如果不给定位的话即使是给它这样的值，它也不会改变。

html、css代码：

<div></div>
<span></span>
<button id="btn">run</button>

<style>
        div{
            width:100px;
            height:100px;
            background-color:red;
            position:absolute; /* 参照文档进行定位 */
            left:0;
            top:0;
        }
        #btn{
            margin-top:150px;
        }
        span{
            position:absolute;
            width:1px;
            height:100px;
            background-color:black;
            top:0;
            left:300px;
        }
    </style>

js代码：

<script>
        var oDiv = document.getElementsByTagName('div')[0];
        var oBtn = document.getElementById('btn');
        var timer = null;
        oBtn.onclick = function(){  //给button绑定事件，点击button使物体运动
            clearInterval(timer);  //清理上一次的定时器
            var iSpeed = 300 - oDiv.offsetLeft > 0? 7 : -7;//(每隔一定的时间物体移动的距离)
                        //目标点距离 - 当前位置 是否大于0？是的话它的速度就是正值，否则就是负值；
            timer = setInterval(function(){
                if(Math.abs(300 - oDiv.offsetLeft) < Math.abs(iSpeed)){  //目标点 - 当前位置 < 步频
                    //Math.abs取绝对值 不考虑正负
                    clearInterval(timer);
                    oDiv.style.left = '300px';  //最新的位置 = 目标点距离
                }else{
                    oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';//div最新的left值 = 当前的left + 速度(步频) + 像素
                }

            },30)
        }
    </script>

封装成函数

<script>
        var oDiv = document.getElementsByTagName('div')[0];
        var oBtn = document.getElementById('btn');
        var timer = null;
        oBtn.onclick = function(){
            startMove(oDiv,300);
        }

        function startMove(dom,target){
            clearInterval(timer);
            var iSpeed = target - dom.offsetLeft > 0? 7 : -7;
            timer = setInterval(function(){
                if(Math.abs(target - dom.offsetLeft) < Math.abs(iSpeed)){
                    clearInterval(timer);
                    dom.style.left = target + 'px';
                }else{
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }

            },30)
        }
    </script>

2、缓冲运动

物体的速度距离目标点越近 就越小，当到达目标点时，速度减小为0

        var timer = null;
        function startMove(dom,target){
            clearInterval(timer);
            var iSpeed = null;
            timer = setInterval(function(){
                iSpeed = (target - dom.offsetLeft)/7;
                iSpeed = iSpeed > 0?Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(target == dom.offsetLeft){
                    clearInterval(timer);
                }else{
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }
            },30)
        }

缓冲运动—伸缩框

html、css代码：

<div class="wrapper">
     <span class="box"></span>
</div>

.wrapper{
            width:400px;
            height:80px;
            background-color:orange;
            margin-top:200px;
            left:-400px;
            position:absolute;
        }
        .box{
            width:50px;
            height:80px;
            background-color:red;
            right:-50px;
            top:0;
            position:absolute;
        }

js：

var oDiv = document.getElementsByTagName('div')[0];
        oDiv.onmouseenter = function(){
            startMove(oDiv,0);
        }
        oDiv.onmouseleave = function(){
            startMove(oDiv,-400);
        }

缓冲运动—多物体运动

js代码：

var oDiv = document.getElementsByTagName('div');
        for(var i = 0; i < oDiv.length; i++){
            oDiv[i].onmouseenter = function(){
                startMove(this,300);
            }
            oDiv[i].onmouseleave = function(){
                startMove(this,100);
            }
        }

        function getStyle(dom,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr];
            }else{
                return dom.currentStyle[attr];
            }
        }
        var timer = null;
        function startMove(dom,target){
            clearInterval(dom.timer);
            var iSpeed = null,iCur = null;
            dom.timer = setInterval(function(){
                iCur = parseInt(getStyle(dom,'width'));
                iSpeed = (target - iCur)/7;
                iSpeed = iSpeed > 0?Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(target == iCur){
                    clearInterval(dom.timer);
                }else{
                    dom.style.width = iCur + iSpeed + 'px';
                }
            },30)
        }

加速度运动

   <script>
        var oDiv = document.getElementsByTagName('div')[0];
        oDiv.onclick = function(){
            startMove(this);
        }

        var timer = null;
        function startMove(dom){
            clearInterval(dom.timer);
            var iSpeed = 20;
            var a = -3;
            dom.timer = setInterval(function(){
                iSpeed += a;
                dom.style.left = dom.offsetLeft + iSpeed + 'px';
            },30)
        }
    </script>