JavaScript實現(xiàn)跟隨滾動緩沖運(yùn)動廣告框-創(chuàng)新互聯(lián)

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

我們注重客戶提出的每個要求，我們充分考慮每一個細(xì)節(jié)，我們積極的做好成都網(wǎng)站設(shè)計、網(wǎng)站制作服務(wù)，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)建站贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,小程序定制開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。

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

這是我在這里使用的一個js運(yùn)動框架，傳遞的參數(shù)只有一個并不是完美運(yùn)動框架。傳遞的參數(shù)是廣告框的運(yùn)動距離，因此我在運(yùn)動框架內(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ù)點(diǎn)
          if(oDiv.offsetTop==iTarget){
            clearInterval(timer);
          }
          else{
          oDiv.style.top=oDiv.offsetTop+ispeed+"px";
          }

    },30);
    };

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：JavaScript實現(xiàn)跟隨滾動緩沖運(yùn)動廣告框-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://m.jiaotiyi.com/article/gsohj.html