JavaScript cycle pause up and down scrolling _javascript tips

Source: Internet
Author: User
Extractnodes function solves the problem of node calculation in each browser. Firefox put the line break into a node, very unreasonable AH.
First use the AppendChild to copy the previous four nodes to the bottom, so that the head and tail is the same content for later use. Remember to do the flash tween cycle movement when it is the same as the tail.
Run the Rolltxt function by setinterval the interval.
The Rolltxt function first calculates is the interval pauses the height, the rolling how high must pause, this altitude I also did not know how to calculate out, has the relation with the CSS, I was tried out
The method of finding the remainder can be used to determine whether the interval height has been rolled over. If the remainder is not equal to 0, continue to add 1 scrolling. If the remainder is 0 indicating that the interval height has been scrolled, pause here.
Set a variable settime to calculate time, add to 50 when settime clear zero, rolling continue, this 50 I did not calculate what the unit is, anyway, I am happy.
This is not enough to stop scrolling, but there is a problem, no limit to the highest value, rolling keep rolling ah, of course, there will be something wrong. Get the hell out of here and start rolling again. Of course is rolled to the end of the same position, the page height minus the visible height is the right, why so? This oneself gestures the gestures to know.
Loop pause up and down scroll already done, don't believe you try
<! 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> cycle pause up and down </title> <style type=" Text/css "> #block2 {height:23px;width : 500px;border: #ccc 1px solid;font-size:12px;text-align:center;} #block2 ul{list-style:outside none none;height:17px;padding:3px 0;overflow:hidden;margin:0;} #block2 ul li{float:left;display:inline;margin:2px 0;height:14px;width:24.9%;} #block2 ul Li A{text-decoration:none;} </style> </pead> <body> <div id= "Block2" > <ul id= "rolltxt" > <li> cloud-Habitat Community 1</l i> <li> Cloud-Habitat community 2</li> <li> cloud-Habitat community 3</li> <li> cloud-Habitat community 4</li> <li> cloud-dwelling Community 5 </li> <li> Cloud-Habitat community 6</li> <li> cloud-Habitat 7</li> <li> cloud-Habitat Community 8</li> <li> cloud-Habitat community 9</li> <li> cloud-Habitat community 10</li> <li> cloud-Habitat community 11</li> <li> cloud-dwelling community 12< /li> <li> Cloud-Habitat community 13</li> <li> cloud-Habitat community 14</li> <li> cloud-Habitat community 15</li> <li> Cloud-dwelling Community 16</li> </ul> <script type= "Text/javascript" > Function extractnodes (pnode) {if (Pnode.node Type = = 3) return null; var node,nodes = new Array (); for (var i=0;node= pnode.childnodes[i];i++) {if (Node.nodetype = 1) nodes.push (node); return nodes; var Obj=document.getelementbyid ("Rolltxt"); for (i=0;i<4;i++) {obj.appendchild (extractnodes (obj) [I].clonenode (true)]; } settime=0; var t=setinterval (rolltxt,50); function Rolltxt () {if (obj.scrolltop% (obj.clientheight-5) ==0) {settime+=1; if (settime==50) {obj.scrolltop+=1; settime=0; }}else{obj.scrolltop+=1; if (obj.scrolltop== (obj.scrollheight-obj.clIentheight)) {obj.scrolltop=0; }} obj.onmouseover=function () {clearinterval ()} obj.onmouseout=function () {T=setinterval (rolltxt,50)} &LT;/SCRI pt> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.