Home > Web Front-end > JS Tutorial > Written under the latest topic of scrolling classic [prototype framework]_prototype

Written under the latest topic of scrolling classic [prototype framework]_prototype

WBOY
Release: 2016-05-16 19:25:49
Original
917 people have browsed it

I saw the scrolling of the Japanese website seen by sin100 the day before yesterday. After digging, it turned out that it was displayed after using Ajax to read the xml.

I made this scroll of classic latest topics for friends’ reference.
The example uses the ajax lightweight framework of prototype.js.
Because the file prototype.js is called remotely, test friends please wait patiently.

Classic does not allow remote calls to js files from other sites, so please do one more step and copy it locally to run to see the results.

Copy code The code is as follows:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    
    
    
    
    
    Dolphin Document

    
    



    

    




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
            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  = "" i ":" title "";
        }
        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']);






source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template