js如何實作緩衝運動（程式碼實例）
- 不言原創
- 2018-08-31 10:25:001196瀏覽
這篇文章帶給大家的內容是關於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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn