Because the marquee label is now used less and more, so scrolling effect is mostly to use JavaScript to achieve, as for do not understand why not directly with the marquee tag friends, may wish to read this article first.
The first approach: simulate marquee with JavaScript.
Source: NetEase Game
<! 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> hot news </title> <style type=" Text/css "> <!--body {margin:0px; font-size:12px; Color: #938C43; line-height:150%; Text-align:center; } a:link{color: #9D943A; font-size:12px;} A:hover{color: #FF3300; font-size:12px;} A:visited{color: #9D943A; font-size:12px;} A.red:link{color: #ff0000; font-size:12px;} A.red:hover{color: #ff0000; font-size:12px;} A.red:visited{color: #ff0000; font-size:12px;} #marqueeBox {background: #f7f7f7; border:1px solid silver;padding:1px;text-align:center;margin:0 Auto;} --> </style> </pead> <body> <p> rolling news </p> <script language= "JavaScript" type= "TE" Xt/javascript "> var marqueecontent=new Array (); Marqueecontent[0]= "with" Dream Secret security "fast retrieve account password"; marqueecontent[1]= "NetEase General make official website"; marqueecontent[2]= "Latest wallpaper download"; marqueecontent[3]= "Latest screensaver download"; var marqueeinterval=new Array (); var marqueeid=0; var marqueedelay=2000; var marqueeheight=20; function Initmarquee () {var str=marqueecontent[0]; document.write (' <div id= "Marqueebox" +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]
Personal opinion: From the web usability point of view, we use this code while taking into account the availability of the NOSCRIPT environment, it is recommended that the content or as the form of the following code appears in the page. Such as:
Copy Code code as follows:
<div id= "Newslist" >
<ul>
<li><a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank> with "dream Secret security" fast retrieve account password </a></li>
<li><a href=http://ekey.163.com/target=_blank> NetEase General to make official website </a></li>
<li><a href=http://xyq.163.com/download/wallpaper.htm target=_blank> Latest wallpaper Download </a></li>
<li><a href=http://xyq.163.com/download/around.htm target=_blank> latest screensavers Download </a></li>
</ul>
</div>
Then use the script to set the hide and read the list item into the array defined in JavaScript. You can also see the list of contents normally in the NoScript environment.
The second method: This is stronger, can automatically according to the content automatically scroll around, solve the problem of interception caused by too small width.
The original author: The Wind is moving
<ptml> <pead> <title> SCROLL </title> <style type= "Text/css" > #infozone {font-size:12px; Color: #aa6; overflow:hidden;width:100px;height:20px;} #infozone Div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;} </style> <script type= "Text/javascript" > var tc; Window.onload=function () {var O=document.getelementbyid (' Infozone '); HScroll (o); Window.setinterval (function () {window.cleartimeout (TC); o.firstchild.style.marginleft= ' 0px '; Scrollup (o,20,0);}, 10000); The function Scrollup (o,d,c) {if (d==c) {var t=o.firstchild.clonenode (true); O.removechild (O.firstchild); O.appendchild (t); t.style.margintop=o.firstchild.style.margintop= ' 0px '; HScroll (o); } else{Ch=false;var s=3,c=c+s,l= (c>=d?c-d:0); o.firstchild.style.margintop=-c+l+ ' px '; Window.settimeout (function () {Scrollup (o,d,c-l)},50); }} function HScroll (o) {var w1=o.firstchild.offseTwidth,w2=o.offsetwidth; if (W1<=W2) return; Tc=window.settimeout (function () {HS (O,W1-W2,0,W1-W2)},3500); function HS (o,d,c,p) {C++;var t= (c>0?-c:c); o.firstchild.style.marginleft=t+ ' px '; if (C==d) {if (d==0) {tc=window.settimeout (function () {HS (O,P,0,P)},2500);} else Tc=window.settimeout (function () {HS (O,0,-P,P)},3500);} else Tc=window.settimeout (function () {HS (O,D,C,P)},5); </script> </pead> <body> <div id= "Infozone" ><div> Wen Yu-Roof (Jay Duet version) </div><div& gt; Fanfan-those flowers </div><div> Angela-Dolls </div><div> Sun Nan & Han-Beautiful myths </div></div> </ Body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Personal opinion: From the semantic point of view of XHTML, the abuse of DIV tag in page content is more serious and can be changed into ul/li form.
The third is the most streamlined, with very little code.
Original Author: Cityvoice
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> New Document </TITLE> <meta name= "generator" content= "EditPlus" > <meta name= "Author" content= "" > <meta N Ame= "Keywords" content= "" > <meta name= "Description" content= "" > <style type= "text/css" > #newslis t{background: #f7f7f7; border:1px solid silver;padding:1px;height:20px;line-height:20px;width:300px; } #contain {font-size:12px;overflow:hidden;list-style:none;width:300px;height:20px;margin:0px;padding:0; } #contain li{Height:20px;line-height:20px;white-space:nowrap;overflow:hidden; } </style> </HEAD> <BODY> <div id= "newslist" > <ul id= "contain" > <li> Wen Yu-roof (sway around) </li> <li> Fanfan-those flowers </li> <li> Angela Han-Doll </l I> <li> Sun Nan & Han-Beautiful Myths ≪/li> <li> Xinzhe-Bai </li> </ul> </div> <script language= "Javasc Ript "> Function xx () {var Container=document.getelementbyid (" contain "); Container.appendchild (Container.firstchild); } setinterval ("XX ()", 3000); </SCRIPT> </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Personal point of view: Too short and lean, if you like simple, this can also be considered.
