缓冲运动

<script>

            //缓冲运动原理

            //距离目标远速度快

            //距离目标近速度慢

            //速度与距离成正比

            function startMove() {

                var oDiv = document.querySelector('.box1');

                setInterval(function () {

                    //回顾：ceil向上取整, floor向下取整 ,round进行4舍5入

                    //这里不使用向上取整的话，系统会默认将小数向下取整，出现物体移动精确

                    var speed = Math.ceil((300 - oDiv.offsetLeft) / 10);

                    //使用目标距离减去当前物体的位置 求出来的就是路程，路程除于10得出的就是速度，这里可以把10理解为时间

                    //这样处理的好处就是使得路径和速度成正比 ，距离目标越远速度越快，距离目标越近速度越慢

                    //就可以得到一个缓冲运动的效果

                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';

                    document.title = oDiv.offsetLeft + ' ' + speed;

                }, 30);

            }

        </script>