JS實現緩衝運動作用詳解

這次帶給大家JS實現緩衝運動作用詳解，JS實現緩衝運動的注意事項有哪些，下面就是實戰案例，一起來看一下。

緩衝需要用到數值取整，向上取整:Math.ceil()  向下取整Math.floor()

移動的速度慢慢減慢的效果，移動速度=(終點位置- 當前位置) / 一個數字

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta>
<title>JS缓冲运动</title>
<style>
#p{
  width:150px;
  height:150px;
  background:#0C6;
  position:absolute;
  left:0;
  top:50px;
}
#p2{
  background:#000;
  height:600px;
  position:absolute;
  left:500px;
  width:2px;
}
</style>

<script>
var speed;
var time;
window.onload = function(){
  var btn = document.getElementById(&#39;btn&#39;);
  btn.onclick = function(){
    speed = 0;
    move(500);
  };
  btn2.onclick = function(){
    speed = 0;
    move(0);
  };
};
function move(e){
  var p = document.getElementById(&#39;p&#39;);
  clearInterval(time);
  time = setInterval(function(){
    //改变位置，如果向左则e==500， 向上取整， 否则向右，向下取整，速度=(终点位置 - 当前位置)/一个数
    e==500 ? speed = Math.ceil((e-(p.offsetLeft))/30):speed = Math.floor((e-(p.offsetLeft))/30)
    if (e <= p.style.left){//达到，关闭定时器
      clearInterval(time);
    }
    else
    {
      p.style.left = p.offsetLeft+speed+&#39;px&#39;;
    }
  },30);
};
</script>

<input>
<input>
<p>
</p>
<p>
</p>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

ES6實作全螢幕滾動外掛程式步驟詳解

VueJs中V-bind指令如何使用

以上是JS實現緩衝運動作用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！