天天看點
傳回

小視訊源碼，Js動畫緩慢效果實作

小視訊源碼，js動畫緩慢效果實作的相關代碼 

<!DOCTYPE HTML>
<html>
 <head>
  <title>js動畫緩動效果實作setInterval()，就是慢慢的停下來</title>
  <meta charset="utf-8" />
  <style>
   * {
    margin: 0;
    padding: 0;
    }
   #box {
    
    width: 100px;
    height: 100px;
    background-color: pink;
   }
  </style>
 </head>
 <body>
  <div id="box"> </div>
  <script>
   //第一步 獲得盒子的目前位置
   var box = document.getElementById('box');
   //每次移動的距離 = （目标值-現在的位置）/10
   function move() {
    box.style.marginLeft = box.offsetLeft + (300 - box.offsetLeft) / 10 + 'px';
    if(box.offsetLeft == 300) {
      clearTimeout(timer);
     }
   }
   //用定時器讓盒子動起來 
   var timer = setInterval(move, 100);
  </script>
 </body>
</html>

以上就是小視訊源碼，js動畫緩慢效果實作的相關代碼， 更多内容歡迎關注之後的文章

javascript 純java script 純java script調用 javascript程式員前端教程 javascript程式員使用 javascript函數對象
上一篇: 阿裡雲資料總線(DataHub)使用Flume插件導入資料示例
下一篇: AI性能最高提升20倍 阿裡雲新一代GPU雲伺服器亮相 搭載NVIDIA A100

繼續閱讀