JS匀速运动

所谓的匀速运动就是速度不变的,比如无缝滑动展示图片就是匀速运动.这种运动的特点就是简单,呆板,不炫丽.

例子:
div匀速运动.

效果如图:

要注意的地方：
1.有些时候不能精确的停在某个位置,所以当距离目标位置很近的时候直接强行把它移到到目标位置就可以了.

2.开启定时器的时候一定要先清除原来的定时器,不然速度会累加,因为多个定时器一起在做一件事情，速度当然会加快.

3.定时器里面要加if-else语句,否则到达目标位置的时候再按运动,又开启一个定时器,虽然已开启就会被关闭,但是如果没有else语句，则执行完if语句后又继续执行下面的代码,div就会又移动speed个像素距离.

4.一般div的运动最好不要靠定时器的时间间隔,一般设置成30ms就好，控制它的left/top/right/bottom等等的变化来间接改变速度就好.

HTML代码：

   <button type="button" id="right" style="width: 100px;">向右运动</button>
    <button type="button" id="left" style="width: 100px;">向左运动</button>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>

CSS代码：

*{margin:0;padding:0;}
        #div1{width:100px;height:100px;background:red;position: absolute;left:600px;top:50px;}
        #div2{width:1px;height: 400px;background: black;position: absolute;left: 600px;top:0;}
        #div3{width:1px;height: 400px;background: black;position: absolute;left: 300px;top:0;}

JS代码:

window.onload = function () {
            var oText = document.getElementById('speed');
            var oRight = document.getElementById('right');
            var oLeft = document.getElementById('left');
            var oDiv = document.getElementById('div1');
            var timerId = 0;
            oRight.onclick = function () {
                startMove(600);
            };
            oLeft.onclick = function () {
                startMove(300);
            };
            function startMove(iTag) {
                clearInterval(timerId); //先清除定时器,避免混乱或者多开，浪费资源
                timerId = setInterval(function () {
                    var speed = (iTag - oDiv.offsetLeft)>0?7:-7; //判断方向
                    if(Math.abs(iTag - oDiv.offsetLeft) <= speed) //当距离小于speed的时候已经不能准确的移动到目标位置了
                    {
                        clearInterval(timerId);
                        oDiv.style.left = iTag + 'px'; //强行移动到目标位置,因为很快,所以感觉不出来.
                    }
                    else
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                },30);
            }
        }