本篇文章给大家带来的内容是关于js如何实现缓冲运动（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
缓冲运动的特性逐渐变慢，最后停止
距离越远速度越大
速度由距离决定
速度=（目标值-当前值）/缩放系数
距离大，速度大。
距离小，速度小。
速度和距离成正比。
缓冲运动的时候速度一定要取整，如果速度0.9的话，不取整会直接变成0；速度大于0应向上取整，小于0应向下取整。
下面我们就来做一个div从0移动到300的缓冲运动，做一个div从600移动到300的缓冲运动。
代码实现缓冲运动<!doctype html><html> <head> <title>缓冲运动</title> <style> #div1{ width: 100px; height: 100px; background: red; position: absolute; /* left: 0; */ left: 600px; top: 50px; } #div2{ /* 300位置的参考线 */ width: 1px; height: 300px; position: absolute; left: 300px; top: 0; background: #000; } </style> <script> window.onload=function(){ var obtn=document.getelementbyid("btn1"); obtn.onclick=function(){ startmove(); } } function startmove(){ var odiv=document.getelementbyid("div1"); setinterval(function(){ var speed=(300-odiv.offsetleft)/10; speed=speed>0?math.ceil(speed):math.floor(speed);//取整 odiv.style.left=odiv.offsetleft+speed+"px"; },30); } </script> </head> <body> <input id="btn1" type="button" value="开始运动" /> <div id="div1"></div> <div id="div2"></div> </body></html>
相关推荐：
js运动缓冲效果的封装函数如何使用
js实现多物体缓冲运动实例代码_javascript技巧
以上就是js如何实现缓冲运动（代码实例）的详细内容。