javascript實現(xiàn)平滑無縫滾動

字號:


    這篇文章主要為大家詳細介紹了javascript實現(xiàn)平滑無縫滾動的具體代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    首先是網(wǎng)頁樣式:
    #demo {
     background: #FFF;
     overflow:hidden;
     border: 1px dashed #CCC;
     width: 1280px;
     height:200px;
     }
     #demo img {
     border: 3px solid #F2F2F2;
     }
     #indemo {
     float: left;
     width: 800%;
     }
     #demo1 {
     float: left;
     }
     #demo2 {
     float: left;
     }
    布局如下: 
    <div id="demo">
    <div id="indemo">
    <div id="demo1">
    <a href="#"><img src="banner.jpg" /></a>
    <a href="#"><img src="banner2.jpg" /></a>
    </div>
    <div id="demo2"></div>
    </div>
    </div>
    具體的JS實現(xiàn):
    <script>
    var speed=10;
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
    if(tab2.offsetWidth-tab.scrollLeft==0)
    tab.scrollLeft-=tab1.offsetWidth
    else{
     tab.scrollLeft++;
     }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval
    (Marquee,speed)};
    </script>
    這里要注意的是:
    scrollLeft代表頁面利用滾動條滾動到右側(cè)時,隱藏在滾動條左側(cè)的頁面的寬度。
    offsetWidth 是對象的可見寬度,包滾動條等邊線,會隨窗口的顯示大小改變。
    setInterval() 方法可按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達式。setInterval() 方法會不停地調(diào)用函數(shù),直到 clearInterval() 被調(diào)用或窗口被關閉。
    明白了這個具體的實現(xiàn)就好理解了。
    實現(xiàn)的原理是這樣的:首先將需要滾動的內(nèi)容復制一份。當右側(cè)的div顯示的內(nèi)容與左側(cè)影藏的內(nèi)容寬度相同時將父容器左側(cè)影藏的內(nèi)容顯示出來,這樣就實現(xiàn)了將左側(cè)影藏的內(nèi)容顯示出來同時將右側(cè)內(nèi)容重新隱藏。如果右側(cè)內(nèi)容顯示的部分少于左側(cè)影藏的內(nèi)容就繼續(xù)講父容器想左側(cè)移動,實現(xiàn)隱藏。其中有一點需要注意的是,由于這里是將兩張圖片同時放入左側(cè),當右側(cè)顯示了一半時會將左側(cè)影藏的完全顯示出來,又因為右側(cè)顯示的內(nèi)容與左側(cè)的左邊內(nèi)容相同所以實現(xiàn)了循環(huán)滾動的效果。
    這樣平滑的滾動就實現(xiàn)了。
    以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。