JS to achieve seamless scrolling picture of the perfect solution without gap rolling

Excerpts online

JS realize the perfect picture seamless rolling solution without gap rolling 2007-08-09 09:31 InnerHTML: Sets or gets the HTML that is inside the start and end tags of an object ScrollHeight: Gets the scrolling height of the object. ScrollLeft: Sets or gets the left distance between the left edge of an object and the current visible content in the window ScrollTop: Sets or gets the distance between the top of the object and the topmost part of the visible content in the window ScrollWidth: Gets the scrolling width of the object Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate offsetparent property Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinates specified by the Offsetparent property offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property Offsetwidth: Gets the width of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property ----------------------------------------------------------------------- Picture scroll up Seamless <style type= "Text/css" > <!-- #demo { Background: #FFF; Overflow:hidden; border:1px dashed #CCC; height:100px; Text-align:center; Float:left; } #demo img { BORDER:3PX solid #F2F2F2; Display:block; } --> </style> Scroll up <div id= "Demo" > <div id= "Demo1" > <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> </div> <div id= "Demo2" ></div> </div> <script> <!-- var speed=10; The larger the number, the slower the speed. var Tab=document.getelementbyid ("demo"); var Tab1=document.getelementbyid ("Demo1"); var Tab2=document.getelementbyid ("Demo2"); tab2.innerhtml=tab1.innerhtml; Clone Demo1 for Demo2 function Marquee () { if (tab2.offsettop-tab.scrolltop<=0)//when scrolling to the junction of Demo1 and Demo2 Tab.scrolltop-=tab1.offsetheight//demo jump to the top else{ tab.scrolltop++ } } var mymar=setinterval (marquee,speed); Tab.onmouseover=function () {clearinterval (MyMar)};//to clear the timer when the mouse moves up to stop the scroll Tab.onmouseout=function () {mymar=setinterval (marquee,speed)};//Reset timer when mouse is moved --> </script> ------------------------------------------------------------ Picture scrolling down seamlessly <style type= "Text/css" > <!-- #demo { Background: #FFF; Overflow:hidden; border:1px dashed #CCC; height:100px; Text-align:center; Float:left; } #demo img { BORDER:3PX solid #F2F2F2; Display:block; } --> </style> Scroll down <div id= "Demo" > <div id= "Demo1" > <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> </div> <div id= "Demo2" ></div> </div> <script> <!-- var speed=10; The larger the number, the slower the speed. var Tab=document.getelementbyid ("demo"); var Tab1=document.getelementbyid ("Demo1"); var Tab2=document.getelementbyid ("Demo2"); tab2.innerhtml=tab1.innerhtml; Clone Demo1 for Demo2 Tab.scrolltop=tab.scrollheight function Marquee () { if (tab1.offsettop-tab.scrolltop>=0)//when scrolling to the junction of Demo1 and Demo2 Tab.scrolltop+=tab2.offsetheight//demo jump to the top else{ tab.scrolltop-- } } var mymar=setinterval (marquee,speed); Tab.onmouseover=function () {clearinterval (MyMar)};//to clear the timer when the mouse moves up to stop the scroll Tab.onmouseout=function () {mymar=setinterval (marquee,speed)};//Reset timer when mouse is moved --> </script> -------------------------------------------------------- Picture scrolling left Seamless <style type= "Text/css" > <!-- #demo { Background: #FFF; Overflow:hidden; border:1px dashed #CCC; width:500px; } #demo img { BORDER:3PX solid #F2F2F2; } #indemo { Float:left; width:800%; } #demo1 { Float:left; } #demo2 { Float:left; } --> </style> Scroll left <div id= "Demo" > <div id= "Indemo" > <div id= "Demo1" > <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> </div> <div id= "Demo2" ></div> </div> </div> <script> <!-- var speed=10; The larger the number, the slower the speed. 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> ------------------------------------------------------ The picture scrolls to the right seamlessly <style type= "Text/css" > <!-- #demo { Background: #FFF; Overflow:hidden; border:1px dashed #CCC; width:500px; } #demo img { BORDER:3PX solid #F2F2F2; } #indemo { Float:left; width:800%; } #demo1 { Float:left; } #demo2 { Float:left; } --> </style> Scroll Right <div id= "Demo" > <div id= "Indemo" > <div id= "Demo1" > <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> <a href= "#" ></a> </div> <div id= "Demo2" ></div> </div> </div> <script> <!-- var speed=10; The larger the number, the slower the speed. var Tab=document.getelementbyid ("demo"); var Tab1=document.getelementbyid ("Demo1"); var Tab2=document.getelementbyid ("Demo2"); tab2.innerhtml=tab1.innerhtml; function Marquee () { if (tab.scrollleft<=0) Tab.scrollleft+=tab2.offsetwidth else{ tab.scrollleft--; } } var mymar=setinterval (marquee,speed); Tab.onmouseover=function () {clearinterval (MyMar)}; Tab.onmouseout=function () {Mymar=setinterval (marquee,speed)}; --> </script>