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 do you do it? Let's see how it's done gradually.
!---->
!--The following is the Java-script code-->
!--
marqueesheight=200//content area height
stopscroll=false//This variable controls whether scrolling is stopped
With (marquees) {
nowrap=true//This table content area does not wrap automatically
style.width=0//So we can set it to a width of 0, because it will be propped up
style.height=marqueesheight;
style.overflowy= "hidden";//scroll bar 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 ('
'
style= "Position:absolute;z-index:1;visibility:hidden" >
function init () {//initialization scrolling content
//Multiple copies of the original content to "Templayer" until the "templayer" height is greater than the content area height:
while (templayer.offsetheight
templayer.innerhtml+=marquees.innerhtml;
copy "twice Times" of "templayer" content back to the original content area:
marquees.innerhtml=templayer.innerhtml+templayer.innerhtml;
//Set a continuous timeout, invoke the "Scrollup ()" function to drive the scroll bar:
setinterval ("Scrollup ()");
}
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;//If the variable "Stopscroll" is true, stop scrolling
pretop=marquees.scrolltop//record scroll bar position before scrolling
marquees.scrolltop+=1//scroll bar moves 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;
}
}
-->
It's done, and it's not hard to do.
