> 웹 프론트엔드 > JS 튜토리얼 > 스크롤링 클래식 [프로토타입 프레임워크]_prototype이라는 최신 주제로 작성되었습니다.

스크롤링 클래식 [프로토타입 프레임워크]_prototype이라는 최신 주제로 작성되었습니다.

WBOY
풀어 주다: 2016-05-16 19:25:49
원래의
917명이 탐색했습니다.

어제 sin100에서 본 일본사이트 스크롤을 보니, Ajax를 이용해서 xml을 읽어본 결과 표시되는 내용이었습니다.

친구들이 참고할 수 있도록 고전적인 최신 주제의 두루마리를 만들었습니다.
이 예에서는 프로토타입.js의 Ajax 경량 프레임워크를 사용합니다.
prototype.js 파일은 원격으로 호출되기 때문에 테스트 친구들은 조금만 기다려주세요.

Classic은 다른 사이트에서 js 파일에 대한 원격 호출을 허용하지 않으므로 한 단계만 더 수행한 후 로컬로 복사하여 실행하여 결과를 확인하시기 바랍니다.

코드 복사 코드는 다음과 같습니다.

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


    
    
    
    
    
    Dolphin Document

    
    



    

    




var Ticker = Class.create();
Ticker.prototype = {
    초기화: function() {
        시도{
        this.scrollType = "normal";
        this.m_scroll = $(인수[0]);
        this.m_scroll_1 = $(인수[1]);
        this.m_scroll_2 = $(인수[2]);
        this.m_speed = (인수[3][0])?arguments[3][0]:3;
        this.m_request = (인수[3][1])?arguments[3][1]:60;
        this.m_loop = (인수[3][2])?arguments[3][2]:0.05;
        this.m_url = (인수[3][3])?arguments[3][3]:'http://bbs.blueidea.com/rss.php?fid=1';
        }catch(e){}
        마지막으로{}
        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,
          { ',
            성공시: 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 설명 = items[i].childNodes[2].childNodes[0].nodeValue;
            var author = items[i].childNodes[4].childNodes[0].nodeValue;
            this.m_scroll_1.innerHTML  = "" i ":" 제목 "";
        }
        this.m_scroll_2.innerHTML = this.m_scroll_1.innerHTML;
    },
    scroll:function(event){
        switch(this.scrollType){
           case "느림":
              if(this.m_scroll_2.offsetWidth-this.m_sc Roll.scrollLeft< =0){
                   this.m_scroll.scrollLeft -= this.m_scroll_1.offsetWidth;
                }else{
                    this.m_scroll.scrollLeft ;
               }
            휴식;
            대소문자 '정상':
            기본값:
              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;
               }
            휴식;
        }
    },
    mouseover:function(){
        this.scrollType = 'slow';
        false를 반환합니다.
    },
    mouseout:function(){
        this.scrollType = 'normal';
        false를 반환합니다.
    }
}
ticker1  = new Ticker("scroll","scrollFrame","scrollFrame2",[3,60,0.05,'http://bbs.blueidea.com/rss.php? fid=1']);






원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿