Making of continuous rolling

We generally use marquee tags to control the scrolling of elements. But one-way marquee scrolling is discontinuous, and every time a scene is rolled, a blank appears. The scrolling in the following description is continuous, uninterrupted.

Below sunny little to introduce you how this is achieved.

In order for scrolling to be "continuous", we need to copy the contents of the caption more than once, until the content is not less than twice times the height of the scrolling area. Then we hide the overflow scroll bar and use the Code control scroll bar to move downward (the content will move up). When the scroll bar scrolls to the bottom, theoretically can not scroll down, so we immediately adjust the scroll bar, it scroll up to the same position as the current screen. As a result, we see continuous scrolling. Oh, that is so simple, how to do it? Let's see how it is achieved gradually.

<div id= "Marquees" >
<!--These are the contents of the subtitles, you can define them arbitrarily-->
<a href= "#" > Link one </a><br>
<br>
<a href= "#" > Link two </a><br>
<br>
<a href= "#" > Link three </a><br>
<br>
<a href= "#" > Link four </a><br>
<br>
<!--end of caption Content-->
</div>
<!--The following is Java-script code-->
<script language= "Java-script" >
<!--
marqueesheight=200; Content area Height

Stopscroll=false; This variable controls whether scrolling is stopped
With (marquees) {
Nowrap=true; The content area of this table does not wrap automatically.
style.width=0; So we can set it to a width of 0, because it's going to be big.
Style.height=marqueesheight;
Style.overflowy= "hidden"; Scroll bars are not visible

Onmouseover=new Function ("Stopscroll=true"); Mouse over, stop scrolling
Onmouseout=new Function ("Stopscroll=false"); Mouse away, start scrolling
}
At this point, the height of the content area is unreadable. The following outputs an invisible layer "templayer", which is later copied into the contents:
document.write (' <div id= "Templayer" style= "Position:absolute;z-index:1;visibility:hidden" ></div> ");

function init () {//Initialize scrolling content
Copy the original content multiple times to "Templayer" until the height of "templayer" is greater than the content area height:
while (Templayer.offsetheight<marqueesheight) {
templayer.innerhtml+=marquees.innerhtml;
}
Copy "twice Times" of "templayer" content back to the original content area:
marquees.innerhtml=templayer.innerhtml+templayer.innerhtml;
Sets the continuous timeout, calling the Scrollup () function to drive the scroll bar:
SetInterval ("Scrollup ()", 10);
}
Document.body.onload=init;

Pretop=0; This variable is used to determine if the scroll bar has reached its end.

function Scrollup () {//scroll bar driver
if (stopscroll==true) return; Stop scrolling If the variable "Stopscroll" is true
Pretop=marquees.scrolltop; Record the scroll bar position before scrolling
Marquees.scrolltop+=1; Scroll bar to move down one pixel
If the scroll bar does not move, scroll up to the same position as the current screen
Not only that, but also scrolling down one pixel (+1):
if (pretop==marquees.scrolltop) {
marquees.scrolltop=templayer.offsetheight-marqueesheight+1;
}
}
-->
</script>

It's done, and it's not hard to do. OK, that's the way to scroll up, so I don't need to introduce you to the other direction. However, Xiao Yang is still a good example, interested friends can click here to download.