溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript實現(xiàn)跟隨滾動緩沖運動廣告框

發(fā)布時間：2020-09-28 09:41:36 來源：腳本之家 閱讀：229 作者：梵海pp 欄目：web開發(fā)

當我們?yōu)g覽一些網(wǎng)頁時我們會發(fā)現(xiàn)頁面的的邊上會有廣告圖片，當滾動滾動條的時候這些廣告圖片會跟隨性的隨頁面一起運動（這里我叫它為廣告框）。一些網(wǎng)頁的廣告框是固定在瀏覽器上的用background：fixed；便可實現(xiàn)。這里我用JavaScript簡單的制作了一個隨滾動緩沖運動的廣告框。

JavaScript實現(xiàn)跟隨滾動緩沖運動廣告框

制作的原理比較簡單，大家都有一個完美的js運動框架，這里的緩沖運動需要用到。這里的廣告框設(shè)定的是跟隨滾動條緩沖運動并運動到瀏覽器的中間位置。需要理解的是運動距離的計算和一些細節(jié)上的處理（一些BUG的預(yù)防）

這是我在這里使用的一個js運動框架，傳遞的參數(shù)只有一個并不是完美運動框架。傳遞的參數(shù)是廣告框的運動距離，因此我在運動框架內(nèi)又獲取了一次對象。

var timer=null;
    function startMover(iTarget){
      var oDiv=document.getElementById('div1');
      clearInterval(timer);
      timer=setInterval(function(){
          var ispeed=(iTarget-oDiv.offsetTop)/8;
          //速度設(shè)置為逐漸減小
          ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
          //避免速度產(chǎn)生小數(shù)點
          if(oDiv.offsetTop==iTarget){
            clearInterval(timer);
          }
          else{
          oDiv.style.top=oDiv.offsetTop+ispeed+"px";
          }

    },30);
    };

樣式和布局代碼

  <style>
    #div1{
      width: 100px;
      height: 100px;
      background: #ccc;
      position: absolute;
      //使用絕對定位讓其處于右上方
      right: 0;
      top: 0;
  </style>

  <body >
    <div id="div1"></div>
  </body>

js代碼

這里增加了.onscroll屬性目的是當滾動滾動條的時候也加載頁面,廣告框就能隨著滾動條一起運動了。還增加了.onresize屬性，由于我要實現(xiàn)廣告框一直是運動到瀏覽器的中間位置，然而當我改變?yōu)g覽器高度的時候也要實現(xiàn)廣告框的運動，所以增加該屬性，當瀏覽器大小改變時加載。

<script>
    window.onload=window.onscroll=window.onresize=function(){

      var oDiv=document.getElementById('div1');
      var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
"scrolltop"是滾動條滾動的距離，這里有一個兼容chrome不支持document.documentElement.scrollTop獲取語句，其他瀏覽器支持。          
      var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
"t"為讓廣告框處于中間位置的高度距離，（獲取瀏覽器的總高度-廣告框自身高度）/2      
      startMover(parseInt(t+scrolltop));
"parseIn"返回一個整數(shù)，避免小數(shù)生成。這里廣告框的總移動距離為（t+scrolltop）    
    };

    var timer=null;
    function startMover(iTarget){
      var oDiv=document.getElementById('div1');
      clearInterval(timer);
      timer=setInterval(function(){
          var ispeed=(iTarget-oDiv.offsetTop)/8;

          ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);

          if(oDiv.offsetTop==iTarget){
            clearInterval(timer);
          }
          else{
          oDiv.style.top=oDiv.offsetTop+ispeed+"px";
          }

    },30);
    };

  </script>

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

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手