亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js實現(xiàn)盒子滾動動畫效果

 更新時間：2020年08月09日 11:36:48   作者：foreverどL  
這篇文章主要為大家詳細介紹了js實現(xiàn)盒子滾動動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)盒子滾動動畫效果的具體代碼，供大家參考，具體內(nèi)容如下

1、效果圖1:

2、效果圖2：

3、源代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      /* 必須加定位才可以動 */
      position: absolute;
      left: 0;
      width: 50px;
      height: 50px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <script>
    // 動畫原理：
    // 1.獲得盒子當前位置
    // 2.讓盒子在當前位置加上2px 的移動距離
    // 3.利用定時器不斷重復中國操作
    // 4.接觸定時器
    // 5.注意添加定位，才可以使用element.style.left
    var box1 =document.querySelector('.box1') // 獲取事件源
    var timer = setInterval(function(){
      if( box1.offsetLeft >= 500){
        clearInterval(timer); // 清除定時器
      }else{
        // 每50毫秒就將新的值給box1.left
        box1.style.left = box1.offsetLeft +2 +'px';
      }
    },50)
  </script>
</body>
</html>

4、喜歡的朋友記得 點贊 轉(zhuǎn)發(fā) 關(guān)注噢

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論