js如何实现缓冲运动（代码实例）
程序员文章站
2022-03-29 07:59:07
...
本篇文章给大家带来的内容是关于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如何实现缓冲运动（代码实例）的详细内容，更多请关注其它相关文章！
上一篇： 深入理解JavaScript执行机制