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

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供孝南網(wǎng)站建設(shè)、孝南做網(wǎng)站、孝南網(wǎng)站設(shè)計(jì)、孝南網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、孝南企業(yè)網(wǎng)站模板建站服務(wù)，10余年孝南做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

制作的原理比較簡單，大家都有一個(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);
    };

樣式和布局代碼

js代碼

這里增加了.onscroll屬性目的是當(dāng)滾動(dòng)滾動(dòng)條的時(shí)候也加載頁面,廣告框就能隨著滾動(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í)加載。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。