前天见到sin100看到的那个日本网站的滚动，挖掘后原来是使用Ajax读取xml后显示出来的。
就弄了这个滚动经典最新话题的供朋友参考参考。
范例使用了prototype.js的ajax轻便型框架。
因为远程调用了prototype.js这个文件，测试的朋友请耐心等候一下下。
经典不允许远程调用别的站点的js文件，所以还请多一部操作，复制到本地运行查看结果。
复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="gb2312">
<head>
<metahttp-equiv="content-type"content="text/html;charset=gb2312"/>
<metaname="author"content="SmilingDolphin"/>
<metaname="keywords"content="design,css,cascading,style,sheets,xhtml,graphicdesign,w3c,webstandards,visual,display,java,javascript,c++,php,jsp,asp,py,pl"/>
<metaname="description"content="myfavoriteslanguage."/>
<metaname="robots"content="all"/>
<title>DolphinDocument</title>
<styletype="text/css"title="currentStyle"media="screen">
#scroll{width:99%;height:25px;border:1pxsolid#2BBB00;background:#E7FFE0;overflow:hidden;}
#scrollFrame,#scrollFrame2{line-height:25px;font-size:13px;word-break:keep-all;line-break:normal;white-space:nowrap;}
#scrollFramespan,#scrollFrame2span{display:inline;margin-right:20px;}
</style>
<scriptsrc="http://prototype.conio.net/dist/prototype-1.4.0.js"type="text/javascript"></script>
</head>
<body>
<divid="scroll">
<divid="scrollFrame"></div>
<divid="scrollFrame2"></div>
</div>
<scriptlanguage="javascript"type="text/javascript">
varTicker=Class.create();
Ticker.prototype={
initialize:function(){
try{
this.scrollType="normal";
this.m_scroll=$(arguments[0]);
this.m_scroll_1=$(arguments[1]);
this.m_scroll_2=$(arguments[2]);
this.m_speed=(arguments[3][0])?arguments[3][0]:3;
this.m_request=(arguments[3][1])?arguments[3][1]:60;
this.m_loop=(arguments[3][2])?arguments[3][2]:0.05;
this.m_url=(arguments[3][3])?arguments[3][3]:'http://bbs.blueidea.com/rss.php?fid=1';
}catch(e){}
finally{}
Event.observe(this.m_scroll,'mouseover',this.mouseover.bindAsEventListener(this),false);
Event.observe(this.m_scroll,'mouseout',this.mouseout.bindAsEventListener(this),false);
newPeriodicalExecuter(this.scroll.bindAsEventListener(this),this.m_loop);
newPeriodicalExecuter(this.load.bindAsEventListener(this),this.m_request);
this.load();
},
load:function(){
varrequest=newAjax.Request(
this.m_url,
{
method:'post',
onSuccess:this.update.bindAsEventListener(this),
onFailure:false,
on304:false
}
);
},
update:function(request){
varitems=request.responseXML.getElementsByTagName("item");
for(vari=0;i<items.length;i++){
vartitle=items[i].childNodes[0].childNodes[0].nodeValue;
varlink=items[i].childNodes[1].childNodes[0].nodeValue;
vardescription=items[i].childNodes[2].childNodes[0].nodeValue;
varauthor=items[i].childNodes[4].childNodes[0].nodeValue;
this.m_scroll_1.innerHTML+="<span><ahref=""+link+""title=""+author+"：rn"+description+"">"+i+"："+title+"</a></span>";
}
this.m_scroll_2.innerHTML=this.m_scroll_1.innerHTML;
},
scroll:function(event){
switch(this.scrollType){
case"slow":
if(this.m_scroll_2.offsetWidth-this.m_scroll.scrollLeft<=0){
this.m_scroll.scrollLeft-=this.m_scroll_1.offsetWidth;
}else{
this.m_scroll.scrollLeft++;
}
break;
case"normal":
default:
if(this.m_scroll_2.offsetWidth-this.m_scroll.scrollLeft<=0){
this.m_scroll.scrollLeft-=this.m_scroll_1.offsetWidth;
}else{
this.m_scroll.scrollLeft+=3;
}
break;
}
},
mouseover:function(){
this.scrollType='slow';
returnfalse;
},
mouseout:function(){
this.scrollType='normal';
returnfalse;
}
}
ticker1=newTicker("scroll","scrollFrame","scrollFrame2",[3,60,0.05,'http://bbs.blueidea.com/rss.php?fid=1']);
</script>
</body>
</html>