js替代marquee實現(xiàn)圖片無縫滾動

1、js替代marquee實現(xiàn)圖片無縫滾動可能大家都碰到過，當(dāng)marquee中滾動的是圖片的時候，滾到終點的時候直接就跳回到起點了，而不像文字那樣可以無縫滾動，下面介紹的是通過js來實現(xiàn)圖片的無縫滾動。先了解一下下面這幾個屬性：innerHTML: 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTMLscrollHeight: 獲取對象的滾動高度。scrollLeft: 設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離scrollTop: 設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離scrollWidth: 獲取對象的滾動寬度offsetHeight: 獲取對象相對于版面或由

2、父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度offsetLeft: 獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置offsetTop: 獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計算頂端位置offsetWidth: 獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的寬度-圖片向上無縫滾動向上滾動!-var speed=10; /數(shù)字越大速度越慢var tab=document.getElementById(demo);var tab1=document.getElementById(demo1);var

3、tab2=document.getElementById(demo2);tab2.innerHTML=tab1.innerHTML; /克隆demo1為demo2function Marquee()if(tab2.offsetTop-tab.scrollTop-圖片向下無縫滾動向下滾動=0)/當(dāng)滾動至demo1與demo2交界時tab.scrollTop+=tab2.offsetHeight /demo跳到最頂端elsetab.scrollTop-var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() clearInter

4、val(MyMar);/鼠標(biāo)移上時清除定時器達到滾動停止的目的tab.onmouseout=function() MyMar=setInterval(Marquee,speed);/鼠標(biāo)移開時重設(shè)定時器-圖片向左無縫滾動向左滾動!-var speed=10; /數(shù)字越大速度越慢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-圖片向右無縫滾動向右滾動!-var speed=10; /數(shù)字越大速度越慢var tab=document.getElementById(demo);var tab1=document.getElementById(demo1);var tab2=document.getElementById