圖片無縫滾動程式碼(向左/向下/向上)_javascript技巧

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

在原作者的基礎上做了一定修改，主要還是在樣式上面，將表格更換為標籤。並將JavaScript標準化，可以在所有瀏覽器中執行。

先了解物件的幾個的屬性： innerHTML:設定或取得位於物件起始和結束標籤內的 HTML scrollHeight: 取得物件的滾動高度。

scrollLeft:設定或取得位於物件左邊界與視窗中目前可見內容的最左端之間的距離scrollTop:設定或取得位於物件最頂端與視窗中可見內容的最頂端之間的距離scrollWidth :取得物件的滾動寬度offsetHeight:取得物件相對於版面或由父座標offsetParent 屬性指定的父座標的高度offsetLeft:取得物件相對於版面或由offsetParent 屬性指定的父座標的計算左側位置offsetTop:取得物件相對於版面或由offsetTop 屬性指定的父座標的計算頂端位置offsetWidth:取得物件相對於版面或由父座標offsetParent 屬性指定的父座標的寬度

複製程式碼 程式碼如下:

图片上无缝滚动

向上滚动

<script> <br><!-- <BR>var speed=10; //数字越大速度越慢 <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)//当滚动至demo1与demo2交界时 <BR>tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 <BR>else{ <BR>tab.scrollTop++ <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 <BR>--> <br></script>
图片下无缝滚动

向下滚动

<script> <BR><!-- <BR>var speed=10; //數字越大速度越慢<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)//當捲動至demo1與demo2交界時<BR>tab.scrollTop =tab2.offsetHeight //demo2交界時<BR>tab.scrollTop =tab2.offsetHeight //demo到最頂端<BR>else{ <BR>tab.scrollTop-- <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval() {clearInterval( MyMar)};//滑鼠移上時清除定時器達到滾動停止的目的<BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//滑鼠移開時重置時器<BR>--> <BR></script>
圖片左無縫滾動

向左捲動

<script> <BR><!-- <BR>var speed=10; //數字越大速度越慢<BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>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 .scrollLeft ; <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)}; <BR>tab.onmouseout=function( ) {MyMar=setInterval(Marquee,speed)}; <BR>--> <BR></script>
圖片右無縫滾動

向右捲動

a>

<script> <BR><!-- <BR>var speed=10; //數字越大速度越慢<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. >else{ <BR>tab.scrollLeft-- <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)}; 🎜>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; <BR>--> <BR></script>