javascript實現平滑無縫滾動_javascript技巧

本文我們實現純JS方式的滾動廣告效果，供大家參考，具體內容如下

先show一下成品：

首先是網頁樣式：

#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" border="0" /></a> <a href="#"><img src="banner2.jpg" border="0" /></a> </div> <div id="demo2"></div> </div> </div>

具體的JS實現：

<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.offsetWidthelse{ tab.scrollLeft++; }}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};</script>

這裡要注意的是：

scrollLeft代表頁面利用捲軸滾動到右側時，隱藏在捲軸左側的頁面的寬度。

offsetWidth 是對象的可見寬度，包捲軸等邊線，會隨視窗的顯示大小改變。

setInterval() 方法可按照指定的周期(以毫秒計)來調用函數或計算運算式。setInterval() 方法會不停地調用函數,直到 clearInterval() 被調用或視窗被關閉。

明白了這個具體的實現就好理解了。

實現的原理是這樣的：首先將需要滾動的內容複寫一份。當右側的div顯示的內容與左側影藏的內容寬度相同時將父容器左側影藏的內容顯示出來，這樣就實現了將左側影藏的內容顯示出來同時將右側內容重新隱藏。如果右側內容顯示的部分少於左側影藏的內容就繼續講父容器想左側移動，實現隱藏。其中有一點需要注意的是，由於這裡是將兩張圖片同時放入左側，當右側顯示了一半時會將左側影藏的完全顯示出來，又因為右側顯示的內容與左側的左邊內容相同所以實現了迴圈滾動的效果。

這樣平滑的滾動就實現了。

以上就是本文的全部內容，希望對大家的學習有所協助。