本篇文章给大家带来的内容是关于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如何实现缓冲运动(代码实例)的详细内容。更多信息请关注PHP中文网其他相关文章!