均速运动

运动模式:一直保持一个速度运动,所以顾名思义为均速运动

原理:每隔一段时间计算div距离浏览器边框的距离

分析:每次点击时都会向前移动,为了防止每次点击时都增加一次速度,需要在点击之后立马清除定时器,使元素保持原有的速度进行运动。如下      

css代码:


ps:300px是目标点

   ps:所有的运动思路都是基于以上实现的,但上面有个bug,就是当目标点不是初始速度的倍数时,运动不会停止,因为没有找到目标点,所以还需要进行优化。那怎么改才能实现?使用计算差值的公式使它停下来  思路:当300 - 295 < 7 时,元素左边距为300px


   当位置大于目标点时,就是元素在目标点右边,应该往左移,就是负的,均速值也是负的,元素在目标点左边,说明是要往右移,值为正的。那怎么判断往左移还是往右移?第一种方法:目标点减当前位置如果大于0(300 - 295 > 0),那么往左移,否则相反。第二种:当前位置大于目标点时,往左移,否则往右移

想要多个元素调用同一个移动函数,就需要封装成函数,通过传参的方式进行调用,如下


你可能感兴趣的:(均速运动)