快捷導(dǎo)航

JavaScript實(shí)現(xiàn)跟隨滾動(dòng)緩沖運(yùn)動(dòng)廣告框

更新時(shí)間：2022年03月31日 14:08:28 作者：梵海pp

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)跟隨滾動(dòng)緩沖運(yùn)動(dòng)廣告框，頁(yè)面左右兩邊跟隨式廣告框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

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

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ù)點(diǎn)
          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;
      //使用絕對(duì)定位讓其處于右上方
      right: 0;
      top: 0;
  </style>

  <body style="height: 2000px;">
    <div id="div1"></div>
  </body>

js代碼

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

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

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

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

您可能感興趣的文章: