Since the marquee label is now used less and more, the scrolling effect is mostly done with JavaScript
The reason for abandoning marquee is because marquee is a serious impact on the user experience, you can compress dozens of lines of content to a few lines of scrolling does help you compress the layout space, but have you ever thought that users might want to read one or two of the content of the line and have to scroll for a half-day? On the top of the classic forum page "Blogbeta Digital engine P4 3.0 server as long as 6999 yuan/year" Advertising text to the right of the aggregate text scrolling for example, do you think this is a good user experience? Are experts in the consortium not as thoughtful as a group of ignorant little P-kids? It's a joke.
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:
Program code
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
HTML code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> New docum ENT </TITLE> <meta name= "generator" content= "EditPlus" > <meta name= "Author" content= "" > < META name= "Keywords" content= "" > <meta name= "Description" content= "" > <style type= "Text/css" > #newslist {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 Culvert- Dolls </li> <li> Sun Nan & Han-Beautiful myths </li> <li> Xinzhe-Bai </li> </ul> </div> <script language= "JavaScript" > 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.
