Using JavaScript to achieve continuous scrolling subtitle effect

We generally use Marquee tags to control the scrolling of elements. However, the one-way Marquee rolling is discontinuous, with a blank space appearing once every 1 act. The scrolling described below is continuous and uninterrupted.

Here's how it works.

In order to scroll "continuously", we need to copy the content of the subtitle many times until the content is no less than twice the height of the scrolling area. We then hide the overflow scroll bar and use the code to control the scroll bar moving down (in which case the content will move up). When the scroll bar reaches the bottom, it theoretically cannot scroll any further, so we immediately adjust the scroll bar to scroll up to a position similar to the one in the current screen. And what we see is a continuous roll. Ha ha, said is so simple, then how to do it? Let's see how that works.

 The < div id="marquees">  The < !--  These are the contents of the subtitles, and you can define them as you like  -->  The < a href="#"> link 1 The < /a>
 The < br>  The < a href="#"> link 2 The < /a>
 The < br>  The < a href="#"> link 3 The < /a>
 The < br>  The < a href="#"> link 4 The < /a>
 The < br>  The < !--  End of Subtitles  -->
 The < /div>
 The < !--  The following is a java-script code  -->
 The < script language="java-script">
 The < !--
marqueesHeight=200; // Content area height 
stopscroll=false; // This variable controls whether or not to stop scrolling 
with(marquees){
noWrap=true; // This table content area does not wrap automatically 
style.width=0; // So we can set its width to zero 0 Because it will be stretched 
style.height=marqueesHeight;
style.overflowY="hidden"; // The scroll bar is 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 output 1 An invisible layer "templayer" , and copy the contents into it later: 
document.write(' The < div id="templayer"
style="position:absolute;z-index:1;visibility:hidden"> The < /div>');
function init(){ // Initializes the scroll content 
// Duplicate the original content multiple times to "templayer" Until the "templayer" Is higher than the height of the content area: 
while(templayer.offsetHeight The < marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} // the "templayer" Copy "twice" of the contents of: 
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
// Set a continuous timeout and call "scrollUp()" Function driven scroll bar: 
setInterval("scrollUp()",10);
}
document.body.onload=init;
preTop=0; // This variable is used to determine whether the scroll bar has reached its end 
function scrollUp(){ // The driver function of the scroll bar 
if(stopscroll==true) return; // If the variable "stopscroll" If true, stop scrolling 
preTop=marquees.scrollTop; // Record the position of the scroll bar before scrolling 
marquees.scrollTop+=1; // Scroll down 1 A pixel 
// If the scroll bar does not move, scroll up to and the current screen 1 The location of the sample 
// And of course not only that, but also scroll down 1 A pixel (+1) : 
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
 The < /script>

So it's done. It's not that hard to do.