js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果

更新時(shí)間：2020年08月09日 11:36:48 作者：foreverどL

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果的具體代碼，供大家參考，具體內(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{
      /* 必須加定位才可以動(dòng) */
      position: absolute;
      left: 0;
      width: 50px;
      height: 50px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <script>
    // 動(dòng)畫原理：
    // 1.獲得盒子當(dāng)前位置
    // 2.讓盒子在當(dāng)前位置加上2px 的移動(dòng)距離
    // 3.利用定時(shí)器不斷重復(fù)中國(guó)操作
    // 4.接觸定時(shí)器
    // 5.注意添加定位，才可以使用element.style.left
    var box1 =document.querySelector('.box1') // 獲取事件源
    var timer = setInterval(function(){
      if( box1.offsetLeft >= 500){
        clearInterval(timer); // 清除定時(shí)器
      }else{
        // 每50毫秒就將新的值給box1.left
        box1.style.left = box1.offsetLeft +2 +'px';
      }
    },50)
  </script>
</body>
</html>

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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