美文网首页
均速运动

均速运动

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

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

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

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

css代码:

ps:300px是目标点

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

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

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

相关文章

  • 均速运动

    运动模式:一直保持一个速度运动,所以顾名思义为均速运动 原理:每隔一段时间计算div距离浏览器边框的距离 分析:每...

  • 七夕拼团丨 三秒速冷 冷感运动毛巾 透气吸汗降温 跑步专用

    三秒速冷,跑步运动专业冷感毛巾。 运动后的畅快,让它帮你擦去汗珠。 三秒速冷,立即冰爽!

  • 跑步

    今早跑步6.09公里,运动时间44:59分钟,平均配速7’23,最快配速6'16,最慢配速8'42。 对我而言,今...

  • JavaScript 运动 04 —— 弹性运动

    弹性运动 弹性运动是物体在某个参考点两侧进行运动。 加速运动和减速运动 加速运动是速度逐渐增加的运动,减速运动是速...

  • 运动记 | 龟速前进

    昨晚抄抄写写不经意又到了凌晨一点,意外的是,昨晚睡得很好,一觉到天明,六点半我就醒来了。 起来默默索索地进行了外出...

  • 跑步减肥随笔3

    跑步的目的是为了健康。那些追求配速的是专业运动员。普通人不应效仿。专业运动员的配速看上去很棒,但他们的伤痛是不会有...

  • 全程心率过高是导致跑马拉松时跑崩溃的主要原因

    心率是衡量运动强度的一个重要个体化指标,在同等配速下,例如6:00配速下,心率低则说明身体对于该配速适应良好,跑起...

  • 2022-08-21

    心率是衡量运动强度的一个重要个体化指标,在同等配速下,例如6:00配速下,心率低则说明身体对于该配速适应良好,跑起...

  • 跑步,刷新自己的配速记录

    今天5公里跑步,再一次突破了自己的配速记录,均速4'40“每公里。我知道,和一些专业的跑者来说,自己的跑步配速差距...

  • 时空、物质与光

    低速运动的物体,体积是有限的,内在的时间改变速度也是有限的;物体运动速度越快,体积越小,时间越慢;反之,物体运动速...

网友评论

      本文标题:均速运动

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