Text scroll up effect, from the Internet to find and put on the blog, as a note, thanks to the original author
Code
< style type ="text/css" >
li { color : #006699 ; font-size : 12px ; margin-top : 3px ; margin-left : 0px }
ul { padding-left : 0px ; padding-top : 1px ; margin-left : 20px }
</ style >
< div id ="marquees" style ="width:210px; margin-top:10px" > <!-- These are the contents of subtitles, you can be arbitrarily defined -> < ul > < li title = "Text 1" > text 1 </ li > < li title = "Text 1" > Text 2 </ li > < li title = "text 3" > text 3 </ Li > < Li title = "text 4" > text 4 </ Li > < Li title = "text 5" > text 5 </ Li >< Li title
= "Text 6" > Text 6 </ Li > < Li title = "Text 7" > Text 7 </ Li > < Li title = "character 8" > Text 8 </ Li > < Li title = "Text 9" > text 9 </ li > </ ul > </ div > <-! the following is the javascript code -> < Script Language = "javascript" > <!- marqueesHeight = 103 ;
// height of the content area stopscroll = false ; // This variable controls whether to stop the scrolling with {(marquees) noWrap = false ; // sentence table of contents area does not wrap style.width = 210 ; // so we can put it in the width is set to 0, because it will be stretch style.height = marqueesHeight; style.overflowY = " hidden " ; // scroll bar is not visible onmouseover = new new Function ( " stopscroll = to true " ); // rollover, stop scrolling onmouseout = new new
Function ( " stopscroll = false " ); // mouse left and began rolling } // this time, the height of the content area that can not be read. Output below an invisible layer "templayer", which will later be copied to the content: document.write ( ' <div ID = "templayer" style = "position: Absolute; Z-index:. 1; visibility: hidden"> < / div> ' ); function the init () { // initialization scrolling the content // multiple copy of the original contents to the "templayer", until "templayer" a height greater than the height of the content area: the while (templayer.offsetHeight < marqueesHeight) { templayer. the innerHTML + = marquees.innerHTML; } // the "double" copy back to the original content area content "templayer" of: marquees.
templayer.innerHTML + templayer.innerHTML;
// set consecutive timed call "scrollUp ()" function of the drive scroll bar: the setInterval ( " scrollUp () " , 100 ); } document.body.onload = the init; preTop = 0 ; / / this variable is used to determine whether the scroll bar has an end function scrollUp () { // scrollbar driver functions IF (stopscroll == to true ) return ; // If the variable "stopscroll" is true, then the stop scrolling preTop = marquees. scrollTop; // record the position before the scroll bar to scroll marquees.scrollTop + =
1 ; // scroll bar is moved downward one pixel
// If not move the scroll bar, and then scroll up to the same position of the current picture
// course Moreover, the same pixel but also a scroll down (+ 1'd): IF (preTop == marquees.scrollTop) { marquees.scrollTop = templayer.offsetHeight - marqueesHeight + . 1 ; } } -> </ Script >
Reproduced in: https: //www.cnblogs.com/Carmack/archive/2010/01/28/1658226.html