均速运动

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

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

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

css代码:


ps:300px是目标点

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


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

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


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 分四部分,看相关书籍,看相关影相,看优秀的照片,拍照片。把每天看过的书籍和影相和优秀照片里自己可以吸收的部分总结出...
    Eleanorgan阅读 2,950评论 0 12
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,513评论 0 5
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,238评论 0 1
  • 他们都说你很丑 你真的很丑么 我觉得一点也不 人有人的外形 花有花的外衣 美丽,不是外形的浅薄 浅薄,概括不了美丽...
    烟雨心清阅读 207评论 10 11
  • 大自然里有着数不尽的美景,勾起我们心灵深处的情怀,同时它也是慷慨的,当我们与它面对面时,充分感受到它的热情直销情怀...
    爱闲聊阅读 220评论 0 0