想必大家都注意到的不循環(huán)滾動，所以出現(xiàn)了很多替代腳本，或iframe或JS輸出，不管怎么做，都略顯麻煩。下面說一下這個相對簡單的實現(xiàn)思路：一個設(shè)定寬度并且隱藏超出它寬度的內(nèi)容的容器demo，里面放demo1和demo2，demo1是滾動內(nèi)容,demo2為demo1的直接克隆，通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的，當(dāng)滾動至demo1與demo2的交界處時直接跳回初始位置，因為demo1與demo2一樣，所以分不出跳動的瞬間，從而達到“無縫”滾動的目的。

在原作者的基礎(chǔ)上做了一定修改，主要還是在樣式上面，將表格更換為標(biāo)簽。

先了解一下對象的幾個的屬性：

innerHTML:設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML

scrollHeight: 獲取對象的滾動高度。

scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

scrollWidth:獲取對象的滾動寬度

offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度

offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置

offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計算頂端位置

offsetWidth:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的寬度

圖片上無縫滾動

向上滾動

<script> <br /> <!-- <br /> var speed=10; //數(shù)字越大速度越慢 <br /> var tab=document.getElementById("demo"); <br /> var tab1=document.getElementById("demo1"); <br /> var tab2=document.getElementById("demo2"); <br /> tab2.innerHTML=tab1.innerHTML; //克隆demo1為demo2 <br /> function Marquee(){ <br /> if(tab2.offsetTop-tab.scrollTop<=0)//當(dāng)滾動至demo1與demo2交界時 <br /> tab.scrollTop-=tab1.offsetHeight //demo跳到最頂端 <br /> else{ <br /> tab.scrollTop++ <br /> } <br /> } <br /> var MyMar=setInterval(Marquee,speed); <br /> tab. {clearInterval(MyMar)};//鼠標(biāo)移上時清除定時器達到滾動停止的目的 <br /> tab. {MyMar=setInterval(Marquee,speed)};//鼠標(biāo)移開時重設(shè)定時器 <br /> --> <br /> </script>
圖片下無縫滾動

向下滾動

<script> <br /> <!-- <br /> var speed=10; //數(shù)字越大速度越慢 <br /> var tab=document.getElementById("demo"); <br /> var tab1=document.getElementById("demo1"); <br /> var tab2=document.getElementById("demo2"); <br /> tab2.innerHTML=tab1.innerHTML; //克隆demo1為demo2 <br /> tab.scrollTop=tab.scrollHeight <br /> function Marquee(){ <br /> if(tab1.offsetTop-tab.scrollTop>=0)//當(dāng)滾動至demo1與demo2交界時 <br /> tab.scrollTop+=tab2.offsetHeight //demo跳到最頂端 <br /> else{ <br /> tab.scrollTop-- <br /> } <br /> } <br /> var MyMar=setInterval(Marquee,speed); <br /> tab. {clearInterval(MyMar)};//鼠標(biāo)移上時清除定時器達到滾動停止的目的 <br /> tab. {MyMar=setInterval(Marquee,speed)};//鼠標(biāo)移開時重設(shè)定時器 <br /> --> <br /> </script>
圖片左無縫滾動

向左滾動

<script> <br /> <!-- <br /> var speed=10; //數(shù)字越大速度越慢 <br /> var tab=document.getElementById("demo"); <br /> var tab1=document.getElementById("demo1"); <br /> var tab2=document.getElementById("demo2"); <br /> tab2.innerHTML=tab1.innerHTML; <br /> function Marquee(){ <br /> if(tab2.offsetWidth-tab.scrollLeft<=0) <br /> tab.scrollLeft-=tab1.offsetWidth <br /> else{ <br /> tab.scrollLeft++; <br /> } <br /> } <br /> var MyMar=setInterval(Marquee,speed); <br /> tab. {clearInterval(MyMar)}; <br /> tab. {MyMar=setInterval(Marquee,speed)}; <br /> --> <br /> </script>
圖片右無縫滾動

向右滾動

<script> <br /> <!-- <br /> var speed=10; //數(shù)字越大速度越慢 <br /> var tab=document.getElementById("demo"); <br /> var tab1=document.getElementById("demo1"); <br /> var tab2=document.getElementById("demo2"); <br /> tab2.innerHTML=tab1.innerHTML; <br /> function Marquee(){ <br /> if(tab.scrollLeft<=0) <br /> tab.scrollLeft+=tab2.offsetWidth <br /> else{ <br /> tab.scrollLeft-- <br /> } <br /> } <br /> var MyMar=setInterval(Marquee,speed); <br /> tab. {clearInterval(MyMar)}; <br /> tab. {MyMar=setInterval(Marquee,speed)}; <br /> --> <br /> </script>