JS缓冲运动

还是用匀速运动的布局来说,这里只是改变了速度而已.

缓存运动的特点:
1.距离越远速度越大
2.逐渐变慢,最后停止
速度=(目标值-当前值)/缩放系数

需要注意的地方和匀速运动的一样,只是多了个向上和向下取整的问题,因为当速度降到1以下的时候,物体已经不在运动了,因为根本没有0.5个像素的说法.所以需要取整.还有因为速度是慢慢的减小，所以不存在到不了的位置，直接iTag == oDiv.offsetLeft就可以判断到达目标位置了.

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)/7; //判断方向
                    speed = speed > 0?Math.ceil(speed):Math.floor(speed);//向右移动的时候向上取整,向左移动的时候向下取整
                    if(iTag == oDiv.offsetLeft)
                        clearInterval(timerId);
                    else
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                },30);
            }
        }