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ā) 關注噢

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

您可能感興趣的文章:

layui實現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項
今天小編就為大家分享一篇layui實現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Json對象和字符串互相轉(zhuǎn)換json數(shù)據(jù)拼接和JSON使用方式詳細介紹(小結)
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式.這篇文章主要介紹了Json對象和字符串互相轉(zhuǎn)換json數(shù)據(jù)拼接和JSON使用方式詳細介紹(小結)的相關資料,需要的朋友可以參考下
2016-10-10
小程序tab頁無法傳遞參數(shù)的方法
這篇文章主要介紹了小程序tab頁無法傳遞參數(shù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
用js刪除tbody的代碼
刪除表格的第一個tbody
2008-11-11
javascript筆記 String類replace函數(shù)的一些事
加固javascript基礎知識目的是為以后研究jQuery源碼做好鋪墊。
2011-09-09
javascript語句中的CDATA標簽的意義
javascript語句中的CDATA標簽的意義...
2007-05-05
javascript實現(xiàn)貪吃蛇小游戲
這篇文章主要為大家詳細介紹了javascript實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
6個DIV 135或246間隔一秒輪番顯示效果
6個DIV 間隔一秒輪番進行奇偶顯示. 比如先135 一秒后 246 然后再135 循環(huán)
2010-07-07
JS中的==運算： [''''] == false —>true
這篇文章主要介紹了JS中的==運算： [''] == false —>true的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
bootstrap——bootstrapTable實現(xiàn)隱藏列的示例
本篇文章主要介紹了bootstrapTable實現(xiàn)隱藏列的示例，具有一定的參考價值，有興趣的可以了解一下。
2017-01-01