English
<div id="marquees"> <!-- These are the content of the subtitles, you can define them arbitrarily--> <a href="#">Link 1</a> <br> <a href="#"> Link 2</a> <br> <a href="#">Link 3</a> <br> <a href="#">Link 4</a> <br> <!-- End of subtitle content --> </div> <!-- The following is the javascript code --> <script language="javascript"> <!-- marqueesHeight=200; //The height of the content area stopsscroll=false; //This variable controls whether to stop Scroll with(marquees){ noWrap=true; //This table content area does not wrap automatically style.width=0; //So we can set its width to 0, because it will be stretched style.height=marqueesHeight ; style.overflowY="hidden"; //The scroll bar is invisible onmouseover=new Function("stopscroll=true"); //The mouse passes and stops scrolling onmouseout=new Function("stopscroll=false"); //The mouse leaves , start scrolling} //At this time, the height of the content area cannot be read. The following outputs an invisible layer "templayer", and later copies the content into it: document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden">< /div>'); function init(){ //Initialize scrolling content //Copy the original content to "templayer" multiple times until the height of "templayer" is greater than the height of the content area: while(templayer.offsetHeight<marqueesHeight){ templayer. innerHTML+=marquees.innerHTML; } //Copy "twice" the content of "templayer" back to the original content area: marquees.innerHTML=templayer.innerHTML+templayer.innerHTML; //Set a continuous timeout and call "scrollUp()" Function-driven scroll bar: setInterval("scrollUp()",20); } document.body.onload=init; preTop=0; //This variable is used to determine whether the scroll bar has reached the end function scrollUp(){ //Scroll Bar driving function if(stopscroll==true) return; //If the variable "stopscroll" is true, stop scrolling preTop=marquees.scrollTop; //Record the scroll bar position before scrolling marquees.scrollTop+=1; //Scroll Move the bar down one pixel //If the scroll bar does not move, scroll up to the same position as the current screen //Of course not only that, but also scroll down one pixel (+1): if(preTop==marquees .scrollTop){ marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1; } } --> </script>
