中文(繁体)
由於marquee標籤現在用得是越來越少了,所以滾動效果的做法大多也都改用javascript來實現了,至於不明白為什麼不直接用marquee標籤的朋友,不妨先閱讀一下這篇文章。
第一種方法:用javascript模擬marquee的做法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>熱點新聞downcodes.com< /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> </head> <body> <h4>滾動新聞< /h4> <script language="JavaScript" type="text/javascript"> var marqueeContent=new Array(); marqueeContent[0]="<a href=http://xyq.163.com/news/2006/ 11/2-2-20061102170913.html target=_blank>用「夢幻密保」快速取回帳號密碼</a>"; marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>網易將軍令官方網站</a>"; marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新桌布下載</a >"; marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新螢幕保護程式下載</a>"; var marqueeInterval=new Array(); var marqueeId=0; var marqueeDelay=2000; var marqueeHeight=20; function initMarquee() { var str=marqueeContent[0]; document.write('<div id="marqueeBox" style="overflow:hiddenwid. 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. length) marqueeId=0; if(document.getElementById("marqueeBox").childNodes.length==1) { var nextLine=document.createElement('DIV'); nextLine.innerHTML=str; document.getElementElementById(marqueeBox" ).appendChild(nextLine); } else { document.getElementById("marqueeBox").childNodes[0].innerHTML=str; document.getElementById("marqueeBox").appendChild(document.getElementById("childeBoxBox)" 0]); document.getElementById("marqueeBox").scrollTop=0; } clearInterval(marqueeInterval[1]); marqueeInterval[1]=setInterval("scrollMarquee()",20); } function scrollMarquee.) { documentument getElementById("marqueeBox").scrollTop++; if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){ clearInterval(marqueeInterval[1]); } } initMarquee(); </script </body> </html>