这篇文章主要为大家详细介绍了JS实现添加缓动画的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现添加缓动画的具体代码,供大家参考,具体内容如下
在看这篇博客之前需要了解JS实现给不同元素设置不同的定时器
需要实现的效果:点击移动到600按钮之后下面的div会由快到慢移动到600px,点击移动到800之后又会移动到800px,又点击移动600的时候会倒回去移动到600px。
首先需要实现第一个功能:
1.缓动画实现,缓动画实现思路如下:
2.需要避免小数的出现,如果直接将上面的公式作为距离的话会出现小数,如果移动的距离是正数的话需要向上取整,如果移动的距离是负数(比如由800px移动到600px)的话需要向下取整。
完整代码:
缓动画
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。
以上就是JS实现添加缓动画的方法的详细内容,更多请关注0133技术站其它相关文章!