A method to implement continuous scrolling marquee effect using JavaScript _javascript tips

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.

Here's how it's implemented.

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 subtitles content, you can define--> <a Href= "#" > Link one </a> <br> <a Href= "#" > Link two </a> <br> A href= "#" > Links three </a> <br> <a Href= "#" > Links four </a> <br> the end of!--subtitles--> </div>!--The following is Java-script code--&G
T <script language= "Java-script" >!--marqueesheight=200; The content area is highly stopscroll=false; This variable controls whether scrolling with (marquees) {nowrap=true;//This table content area does not automatically wrap style.width=0;//So we can set its width to 0 because it will be propped up style.height=
Marqueesheight; Style.overflowy= "hidden"; Scroll bars do not see Onmouseover=new Function ("Stopscroll=true"); Mouse over, stop scrolling onmouseout=new Function ("Stopscroll=false"); Mouse left, start scrolling}//At this time, the height of the content area is unreadable. Below the output of an invisible layer "templayer", the content will later be copied to the inside: document.write (' <div id= ' Templayer "style=" position:absolute;z-index:1;
Visibility:hidden "></div>"); function init () {///Initialize scrolling content//multiple copies of the original content to "Templayer" until the height of "templayer" is greater than the content area height: while (
templayer.offsetheight<marqueesheight) {templayer.innerhtml+=marquees.innerhtml}///copy "Templayer" content "twice times" back to the original content area: Marquees.innerhtml=templayer.innerhtml+templayer.innerhtml;
Sets a 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's drive functions 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 bar to move down one pixel//if the scroll bar is not moving, 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.