快捷導(dǎo)航

JS平滑無(wú)縫滾動(dòng)效果的實(shí)現(xiàn)代碼

更新時(shí)間：2016年05月06日 17:01:50 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JS平滑無(wú)縫滾動(dòng)效果的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考

本文我們實(shí)現(xiàn)純JS方式的滾動(dòng)廣告效果。

先show一下成品：

首先是網(wǎng)頁(yè)樣式：

 #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實(shí)現(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代表頁(yè)面利用滾動(dòng)條滾動(dòng)到右側(cè)時(shí)，隱藏在滾動(dòng)條左側(cè)的頁(yè)面的寬度。

offsetWidth 是對(duì)象的可見寬度，包滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變。

setInterval() 方法可按照指定的周期(以毫秒計(jì))來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。setInterval() 方法會(huì)不停地調(diào)用函數(shù),直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。

明白了這個(gè)具體的實(shí)現(xiàn)就好理解了。

實(shí)現(xiàn)的原理是這樣的：首先將需要滾動(dòng)的內(nèi)容復(fù)制一份。當(dāng)右側(cè)的div顯示的內(nèi)容與左側(cè)影藏的內(nèi)容寬度相同時(shí)將父容器左側(cè)影藏的內(nèi)容顯示出來(lái)，這樣就實(shí)現(xiàn)了將左側(cè)影藏的內(nèi)容顯示出來(lái)同時(shí)將右側(cè)內(nèi)容重新隱藏。如果右側(cè)內(nèi)容顯示的部分少于左側(cè)影藏的內(nèi)容就繼續(xù)講父容器想左側(cè)移動(dòng)，實(shí)現(xiàn)影藏。其中有一點(diǎn)需要注意的是，由于這里是將兩張圖片同時(shí)放入左側(cè)，當(dāng)右側(cè)顯示了一半時(shí)會(huì)將左側(cè)影藏的完全顯示出來(lái)，又因?yàn)橛覀?cè)顯示的內(nèi)容與左側(cè)的左邊內(nèi)容相同所以實(shí)現(xiàn)了循環(huán)滾動(dòng)的效果。

這樣平滑的滾動(dòng)就實(shí)現(xiàn)了。

以上這篇JS平滑無(wú)縫滾動(dòng)效果的實(shí)現(xiàn)代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: