Seamless uninterrupted picture vertical scrolling effect

Seamless uninterrupted picture vertical scrolling effect:

Vertical scrolling Effect Although the use of frequency does not have a high level of scrolling, but there are a lot of use, such as the vertical scrolling link effect, the following examples of how to implement this effect, the code example is as follows:

<! DOCTYPE html>{width:280px;Height:240px;Overflow:Hidden; }#main{margin:0px Auto;Margin-top:50px; }ul{List-style:None;margin:0px Auto;width:180px;Height:240px; }Li{width:90px;Height:35px;float: Left;text-align:Center; }</style> <script type= "Text/javascript" > Window.onload=function (){var speed=10;   var Parent=document.getelementbyid ("parent");   var First=document.getelementbyid ("First");   var Second=document.getelementbyid ("second");   second.innerhtml=first.innerhtml;     function done () {if (Parent.scrolltop-first.offsetheight >=0) {parent.scrolltop-=second.offsetheight; }Else{parent.scrolltop++; }} var mymar=setinterval (done,speed); Parent.onmouseover=function (){clearinterval (MyMar)}parent.onmouseout=function (){mymar=setinterval (done,speed)} } </script> 

The above code realizes the image seamless vertical scrolling effect, the following is a brief introduction of its implementation process:

I. Principle of implementation:

To achieve an upward scrolling effect, when the contents of the parent element exceed its height, the setinterval () function periodically calls the done () function to achieve an increasing effect of the ScrollTop property value of the parent, thus achieving a scrolling effect. To enable seamless scrolling, the pictures in the first object are passed through the second.innerhtml= first.innerhtml copies a copy placed in the second object so that when the first object scrolls up, the second object can fill the empty space that would otherwise appear after the first object, and when the parent's ScrollTop attribute value equals the width of the diagram first object , that is, when the first object scroll up is completely hidden, then reset the ScrollTop property value of the parent to zero, and restart the new round of scrolling, and so forth.

Two. Code comments:

1.window.onload=function () {} Specifies that the code in curly braces be executed after the document is loaded.

2.var speed=10 Set the scrolling speed, the larger the scroll the slower.

3.var Parent=document.getelementbyid ("parent") gets the parent object.

4.var First=document.getelementbyid ("first") gets the first object.

5.var Second=document.getelementbyid ("second") Gets the second object.

6.second.innerhtml=first.innerhtml sets the contents of first to the second object.

7.function done () declares a function to implement scrolling.

7.1.if (parent.scrolltop-first.offsetheight>=0) determines whether the content of the parent is scrolled up to the width of the first object, or, if equal, by parent.scrolltop-= The Second.offsetheight statement sets the Parent.scrolltop value to zero and, if not equal, parent.scrolltop++, which continues to scroll up.

The 8.var mymar=setinterval (done,speed) loop executes the done () function and returns an identity ID value so that the Clearinterval function is used.

9.parent.onmouseover=function () {clearinterval (MyMar)} stops scrolling when the mouse is placed on the parent object.

Parent.onmouseout=function () {Mymar=setinterval (done,speed)} continue scrolling when the mouse leaves.

The original address is: http://www.51texiao.cn/javascriptjiaocheng/2015/0428/305.html

The most original address is: http://www.softwhy.com

Seamless uninterrupted picture vertical scrolling effect