美文网首页
均速运动

均速运动

作者: 小渣渣_e7b4 | 来源:发表于2019-04-05 10:56 被阅读0次

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

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

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

    css代码:

    ps:300px是目标点

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

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

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

    相关文章

      网友评论

          本文标题:均速运动

          本文链接:https://www.haomeiwen.com/subject/vsyjqqtx.html