Javascript模拟加速运动与减速运动代码分享_javascript技巧
程序员文章站
2022-05-13 16:03:43
...
加速运动,即一个物体运动时速度越来越快;减速运动,即一个物体运动时速度越来越慢。现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外一个元素的距离,如xxx.style.left或xxx.style.marginLeft,然后每次运动后都使速度增加,这样加速运动的效果就出现了,减速运动是同样的道理。
Javascript加速运动
Javascript减速运动
下面是两个示例:
加速运动
复制代码 代码如下:
注:本示例中,点击GO后,div块会一直向右做加速运动
减速运动
复制代码 代码如下:
注:本示例中,点击GO后,div块会一直向右做减速运动,直到速度减为零后,速度变为负值,再向左做加速运动
上一篇: 短信验证码
推荐阅读
-
javascript 设为首页与加入收藏兼容多浏览器代码_javascript技巧
-
javascript suggest效果 自动完成实现代码分享_javascript技巧
-
有提示确定与取消功能的弹出式窗的代码_javascript技巧
-
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容_javascript技巧
-
javascript模拟地球旋转效果代码实例_javascript技巧
-
使用JavaScript实现网页版Pongo设计思路及源代码分享_javascript技巧
-
PHP HTML JavaScript MySQL代码如何互相传值的方法分享_php技巧
-
利用window.name实现windowStorage代码分享_javascript技巧
-
JS 获取span标签中的值的代码 支持ie与firefox_javascript技巧
-
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)_javascript技巧