首頁 >web前端 >js教程 >js如何實作緩衝運動（程式碼實例）

js如何實作緩衝運動（程式碼實例）

不言原創: 2018-08-31 10:25:001223瀏覽

這篇文章帶給大家的內容是關於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如何實作緩衝運動（程式碼實例）

緩衝運動的特性

程式碼實現緩衝運動

相關文章