The day before yesterday saw sin100 to see the Japanese web site scrolling, mining is used to read XML after the use of Ajax display.
Get this rolling classic latest topic for friends Reference.
The example uses the Prototype.js AJAX lightweight framework.
Because the remote call prototype.js this file, test the friend please patiently wait a moment.
The classic does not allow remote calls to other sites of JS files, so please do more than one operation, copy to the local run view results.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta name= "Author" content= "Smiling Dolphin"/>
<meta name= "keywords" content= "design, CSS, cascading, style, sheets, XHTML, graphic design, web-standards, visual , display, Java, JavaScript, C + +, PHP, JSP, ASP, py, pl "/>
<meta name= "description" content= "My favorites language."/>
<meta name= "Robots" content= "all"/>
<title>dolphin document</title>
<style type= "Text/css" title= "Currentstyle" media= "screen" >
#scroll {width:99%;height:25px;border:1px solid #2BBB00; background: #E7FFE0; overflow:hidden;}
#scrollFrame, #scrollFrame2 {line-height:25px;font-size:13px; word-break:keep-all;line-break:normal; White-space: nowrap;}
#scrollFrame span, #scrollFrame2 span{display:inline;margin-right:20px;}
</style>
<script src= "Http://prototype.conio.net/dist/prototype-1.4.0.js" type= "Text/javascript" ></script>
<body>
<div id= "Scroll" >
<div id= "Scrollframe" ></div>
<div id= "ScrollFrame2" ></div>
</div>
<script language= "javascript" type= "Text/javascript" >
var ticker = 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);
New Periodicalexecuter (This.scroll.bindAsEventListener (this), this.m_loop);
New Periodicalexecuter (This.load.bindAsEventListener (this), this.m_request);
This.load ();
},
Load:function () {
var request = new Ajax.request (
This.m_url,
{
Method: ' Post ',
OnSuccess:this.update.bindAsEventListener (This),
Onfailure:false,
On304:false
}
);
},
Update:function (Request) {
var items = request.responseXML.getElementsByTagName ("item");
for (Var i=0;i<items.length;i++) {
var title = Items[i].childnodes[0].childnodes[0].nodevalue;
var link = items[i].childnodes[1].childnodes[0].nodevalue;
var description = Items[i].childnodes[2].childnodes[0].nodevalue;
var author = items[i].childnodes[4].childnodes[0].nodevalue;
This.m_scroll_1.innerHTML + = "<span><a href=\" "+link+" \ "title=\" "+author+": \ r \ n "+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 ';
return false;
},
Mouseout:function () {
This.scrolltype = ' normal ';
return false;
}
}
Ticker1 = new Ticker ("scroll", "Scrollframe", "scrollFrame2", [3,60,0.05, ' http://bbs.blueidea.com/rss.php?fid=1 ']);
</script>
</body>
