JavaScript CSS Universal cyclic scroll bar _javascript tips

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Scroll Board </title> <style type=" TEXT/CSS ">/* Initialization/Body {FONT:12PX/1" song " , SimSun, serif; Background: #fff; Color: #000; }/* Core is position:relative, in order to let its internal UL to absolute positioning, by changing the top value to move up position. * * Scrollul {overflow:hidden; position:relative; /* * Demo multiple scroll boards are used at the same time, this is the unified press per line 20px High, the first 4 lines per screen, the 2nd 6 lines per screen. In fact, each group of high Bank can also be different. The scrolling speed is independent of the specific row height. * * #scrollUlTest1 {height:80px;} #scrollUlTest2 {height:120px;} /* Clear Browser default margin and padding values/. Scrollul ul,. Scrollul li {margin:0; padding:0; List-style:none outside; /* Clears the default placeholder for list items in the browser/}. Scrollul ul {position:absolute; }. Scrollul Li {height:20px; } </style> <script type= "Text/javascript" language= "JavaScript" > <!--/* Universal Rolling Board 2009-9-9 15:16:13 Author: Xuefeng Welcome reprint use, please include this paragraph complete description. *//The final height of each screen heightview and to move the UL node to switch to the superior range of variables, so that the ScrollView function does not have to pass parameters, so that in settimeout can be more easily used settimeout (ScrollView, dur ation); instead of using the nested anonymous function anymore. /** Containerid The ID of the outer node of the scroll board numviews several screens to scroll, the total number of rows to be displayed should be the integer multiple of the number of screens. ShowTime the time displayed when each screen is docked, the unit millisecond scrolltime each time for scrolling one screen, unit millisecond * * * var scrollul=function (Containerid, Numviews, ShowTime, Scrollti Me) {//timer variable, because there is an event handler that stops scrolling when it moves to the layer, and it may not have started the timer yet, so declare the variable first. This.timer=null; This.numviews = Numviews; This.showtime = ShowTime; This.scrolltime = Scrolltime; This.container = document.getElementById (Containerid); var ulchild = this.container.getElementsByTagName (' ul '); Here only a UL node, get it var ul = ulchild[0]; UL is not used to specify a high level of CSS, ie in realstyle with the height, can only get auto, and Getboundingclientrect () is both IE and FF support the way. var rect = Ul.getboundingclientrect (); var heightall = rect.bottom-rect.top; The actual pixel height of each screen var heightview = heightall/this.numviews; The number of milliseconds per move of 1 pixels var msperpx = This.scrolltime/heightview; Make a copy of it,After the original block, the display var ulcopy = Ul.clonenode (True) for the header end; UlCopy.style.top = heightall+ ' px '; This.container.appendChild (ulcopy); To use the current class in an event handler function, you have to assign this to a variable of this scope, such as itself. In fact, the variables in this range are directly available, such as: Heightview, msperpx var itself = this; Scroll up function var ScrollView = functions () {var oldtop = (' ==ul.style.top ')? 0:parseint (Ul.style.top); After moving to the top, the position is restored and two blocks continue to move up from 0 onwards. if (OldTop <-heightall) {oldtop = 0; } ul.style.top = (oldTop-1) + ' px '; UlCopy.style.top = (OldTop + heightAll-1) + ' px '; One more stop for each roll. OldTop-1 is designed to stop it in an integer position. var duration = (0 = ((oldTop-1)% Heightview))? Itself.showTime:msPerPx; Itself.timer = settimeout (ScrollView, duration); }; When the slide is defined as a prototype method, it seems so settimeout (Itself.slide, itself.showtime); Timing operation is not good, but only local functions can be timed operation, if with parameters, but also encapsulated into an anonymous function: Itself.timer = settimeout (ScrollView, itself.showtime); Stops scrolling this.container.onmouseover = function () {window.cleartimeout (Itself.timer) when the mouse is moved; }; Move the mouse to continue scrolling, do not distinguish between the whole screen stopped or rolling, all according to the rest of the time to delay. This.contaiNer.onmouseout = function () {Itself.timer = settimeout (ScrollView, itself.showtime); }; }; Window.onload = function () {///The first total of 20 lines, showing 4 rows at a time, 5-screen var S1 = new Scrollul (' ScrollUlTest1 ', 5, 2000, 1000); The second is a total of 18 lines, showing 6 rows at a time, divided into 3-screen var s2 = new Scrollul (' ScrollUlTest2 ', 3, 3000, 2000); }; --> </script> </pead> <body> <p> Universal Scrolling Board demo </p> <p> 1th Group </p> <div CLA ss= "Scrollul" id= "ScrollUlTest1" > <ul> <li> 1th article </li> <li> 2nd item </li> <li> 3 Content </li> <li> 4th Article </li> <li> 5th article </li> <li> 6th content </li> <li> 7th Content </li> <li> 8th article </li> <li> 9th article </li> <li> 10th content </li> <li> 11th Content </li> <li> 12th Article </li> <li> 13th article </li> <li> 14th content </li> <li> 1th 5 Content </li> <li> 16th article </li> <li> 17th article </li> &LT;LI&Gt; 18th article content </li> <li> 19th Article </li> <li> 20th article </li> </ul> </div> &L t;h4> 2nd group </p> <div class= "Scrollul" id= "ScrollUlTest2" > <ul> <li> 1th article </li> <li& GT 2nd article content </li> <li> 3rd Article </li> <li> 4th article </li> <li> 5th content </li> <li&gt 6th article content </li> <li> 7th Article </li> <li> 8th article </li> <li> 9th content </li> <li> 10 Content </li> <li> 11th article </li> <li> 12th article </li> <li> 13th article </li> <li&gt 14th article content </li> <li> 15th article </li> <li> 16th article </li> <li> 17th content </li> <li& gt; 18th article content </li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]