用javascript代替marquee的滚动字幕效果代码

1 简单滚动

 

  <! 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 > 热点新闻 </ 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:hidden;width:250px;height:'+marqueeHeight+'px" οnmοuseοver="clearInterval(marqueeInterval[0])" οnmοuseοut="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 >  
</ html >  

 

个人观点：从web可用性角度上讲，我们在采用这段代码的同时要考虑到noscript环境下的可用性，建议将内容还是以下边代码的形式出现在页面中。如：

 

< div  id ="newslist" >  
< ul >  
< li >< a  href =http://xyq.163.com/news/2006/11/2-2-20061102170913.html  target =_blank > 用“梦幻密保”快速取回帐号密码 </ a ></ li >  
< li >< a  href =http://ekey.163.com/  target =_blank > 网易将军令官方网站 </ a ></ li >  
< li >< a  href =http://xyq.163.com/download/wallpaper.htm  target =_blank > 最新壁纸下载 </ a ></ li >  
< li >< a  href =http://xyq.163.com/download/around.htm  target =_blank > 最新屏保下载 </ a ></ li >  
</ ul >  
</ div >

然后用脚本去设置隐藏，将列表项读进javascript中定义的数组中。即可达到在noscript环境下也能正常看到内容列表。
第二种方法：这个更强，能自动根据内容自动进行左右滚动，解决了宽度太小造成的截取问题。
原文作者：风动人

个人观点：从xhtml的语义化的角度看，页面内容中滥用div标签现象比较严重，可改成ul/li形式。
第三种是最精简的，代码非常少。
原文作者：cityvoice

< html >  
< head >  
< 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); 
} 
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 >  
</ head >  

< body >  
< div  id ="infozone" >< div > 温岚 - 屋顶(周杰伦 对唱版) </ div >< div > 范玮琪 - 那些花儿 </ div >< div > 张韶涵 - 娃娃 </ div >< div > 孙楠&韩红 - 美丽的神话 </ div ></ div >  
</ body >  
</ html >  

 

<! 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  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 >< a  href ="http:/www.iwcn.net" > 温岚 - 屋顶(左右摆动) </ a ></ li >  
             < li >< a  href ="http:/www.iwcn.net" > 范玮琪 - 那些花儿 </ a ></ li >  
             < li >< a  href ="http:/www.iwcn.net" > 张韶涵 - 娃娃 </ a ></ li >  
             < li >< a  href ="http:/www.iwcn.net" > 孙楠&韩红 - 美丽的神话 </ a ></ li >  
             < li >< a  href ="http:/www.iwcn.net" > 张信哲 - 白月光 </ a ></ li >  
         </ ul >  
     </ div >  
< SCRIPT  LANGUAGE ="JavaScript" > ...  
function xx()...{ 
var container=document.getElementById("contain"); 
container.appendChild(container.firstChild); 
} 
setInterval("xx()",3000); 
</ SCRIPT >  
  </ BODY >  
</ HTML >  

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/9777.htm