JavaScript text up and down interval scrolling code compliant with Web Standard script home revision _javascript tips

Source: Internet
Author: User
Tags setinterval
First text up and down interval scroll correction version
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <title> compliant with Web Standard text interval scrolling JS code </title> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <style type=" Text/css "> <!--body,td,th {font-size:12px; Color: #333333; } a {font-size:12px; Color: #333333; } a:link {text-decoration:none; } a:visited {text-decoration:none; } a:hover {text-decoration:none; Color: #FF3300; } a:active {text-decoration:none; } body,div{margin:0 padding:0}--> </style></pead> <body> <script> var marqueecontent=n EW Array (); Rolling news marqueecontent[0]= ' <font color= ' #0000CC ' >14:25 </font>html/js Mutual conversion Tools-IE7 compatible version '; marqueecontent[1]= ' <font color= ' #0000CC ' >14:25 </font>css online compression tool '; marqueecontent[2]= ' <font color= "#0000CC" >14:25 </font>css reshaping and Optimization toolCompression '; marqueecontent[3]= ' <font color= ' "#0000CC" >14:25 </font>js JS compression '; var marqueeinterval=new Array (); Define some common and frequently used variable var marqueeid=0; var marqueedelay=2000; Update time, milliseconds var marqueeheight=18; Container Height//Next is to define some functions to use function Initmarquee () {var str=marqueecontent[0]; document.write (' <div id=marqueebox +marqueeheight+ ' px;line-height: ' +marqueeheight+ ' px ' onmouseover= ') Clearinterval (Marqueeinterval[0]) "onmouseout=" Marqueeinterval[0]=setinterval (\ ' StartMarquee () \ ', MarqueeDelay) " ><div> ' +str+ ' </div></div> '); marqueeid++; Marqueeinterval[0]=setinterval ("StartMarquee ()", marqueedelay); function StartMarquee () {var str=marqueecontent[marqueeid]; marqueeid++; if (marqueeid>=marqueecontent.length) marqueeid=0; if (document.getElementById ("Marqueebox"). Childnodes.length==1) {var nextline=document.createelement (' DIV '); NEXTLINE.INNERHTML=STR; document.getElementById ("Marqueebox"). AppendChild (nextline); else {DOCUMENT.GEtelementbyid ("Marqueebox"). Childnodes[0].innerhtml=str; document.getElementById ("Marqueebox"). AppendChild (document.getElementById ("Marqueebox"). ChildNodes[0]); document.getElementById ("Marqueebox"). Scrolltop=0; } clearinterval (marqueeinterval[1]); Marqueeinterval[1]=setinterval ("Scrollmarquee ()", 20); function Scrollmarquee () {document.getElementById ("Marqueebox"). scrolltop++; if (document.getElementById ("Marqueebox"). scrolltop%marqueeheight== (marqueeHeight-1)) {clearinterval ( MARQUEEINTERVAL[1]); } initmarquee (); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]


There are some problems with the second Firefox run. But learning JS friends can see the main idea is to see.
<! 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>js text-spaced scrolling code _ suitable for announcements </title> <meta name=" keywords "content=" text scrolling, interval scrolling, text over , JS code "/> <meta name=" description "content=" JS to achieve text-interval scrolling effect, suitable for announcements. "/> <style type=" Text/css "> <!--body{font-size:12px;} #shangfan {font-family: neo-Arial, XXFarEastFont-Arial, Imitation _gb2312;font-size:12px, line-height:24px height:24px width:400px; border:solid 1px #ccc; Overflow:hidden;} #shangfan ul{margin:0px 10px;padding:0px;list-style-type:none;} #shangfan ul li{/* text beyond the line, automatically omitted */overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:0px;} --> </style> </pead> <body> <div id= "Shangfan" > <div id= "Holder" > <ul> < JavaScript Online encryption tool for Li>packer_ Xeon </li> <li>xhtml Code nested View tool [tag closure]</li> <li> Cloud-dwelling community online conversion can realize all kinds of into the system </li> <li> online JS foot Test JS Error & lt;/li> <li> convert HTML to Php,javascript and ASP's online tools </li> </ul></div> </div> <script Type= "Text/javascript" > Function Marquee (height,speed,delay) {var scrollt; var pause = false; var scrollbox = document.getElementById ("Shangfan"); if (document.getElementById ("Holder"). offsetheight <= height) return; var _tmp = ScrollBox.innerHTML.replace (' Holder ', ' holder2 ') scrollbox.innerhtml + = _tmp; Scrollbox.onmouseover = function () {pause = true} Scrollbox.onmouseout = function () {pause = false} Scrollbox.scrolltop = 0; function Start () {scrollt = SetInterval (scrolling,speed); if (!pause) Scrollbox.scrolltop + + 2; The function scrolling () {if (scrollbox.scrolltop% height!= 0) {scrollbox.scrolltop = 2; if (scrollbox.scrolltop >= scrollbox.scrollheight/2) scrollbox.scrolltop = 0; } else{clearinterval (scrollt); SetTimeout (STart,delay); } settimeout (Start,delay); } marquee (24,30,3000); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Related Article

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.