[함수] js_rolling , JS로 만든 롤링 클래스

펌입니다..

 

===================================================

전에 만든게 있는데, 그냥 다시 만듬
이번은 left도 됩니다.
소스가 더 간결해졌습니다.(?)
이 소스가 업데이트 된다면 제 홈페이지에만 다시 올립니다.
물론 링크따라 들어가면 어여쁜 공대여자 그림과 함께 예제를 보실 수 있습니다.

#P.S
방향을 right와 down도 계획했지만...
도저히 하는 방법을 모르겠습니다.
누구 아시면 알려주세요.

//===============================================
/*========================================
js_rolling.js

#간단설명
<div><img /><img /></div>
라고 했을 경우 div안의 img를 위, 또는 왼쪽으로 롤링 시킨다.


# 사용법
<script type="text/javascript" charset='utf-8' src="js_rolling.js"></script>
//JS스크립트 로드

<div id='div1'><img /><img /><img /><img /><img /></div>
//처럼 구성후 div의 너비와 높이는 꼭 정해주기 바랍니다.

var roll = new js_rolling('rolling');
or
var roll = new js_rolling(document.getElementById('rolling'));
// id이름을 적던지, 직접 대상을 지목해서 롤링 클래스로 객체를 만듬


roll.move_gap = 1;    //움직이는 픽셀단위
roll.time_dealy = 10; //움직이는 타임딜레이
roll.time_dealy_pause = 5000;//하나의 대상이 새로 시작할 때 멈추는 시간, 0 이면 적용 안함
roll.set_direction(4); // 반향을 바꿈. 1: top, 4:left 그외의 경우 동작안함
roll.start(); //롤링 동작

#주의
div를 img대신 넣을 경우 left로 동작이 이상하게 됨
div를 롤링할 경우 direction은 top(1)만 사용하길 바람
꼭 left로 할 경우 span를 대신 사용바람

#사용제약
사용시 "공대여자는 예쁘다"를 나타내셔야합니다.

만든날 : 2007-06-07
만든이 : mins01,mins,공대여자
홈페이지 : http://mins01.zerock.net
NateOn&MSN : mins01(at)lycos.co.kr
========================================*/
var js_rolling = function(this_s){
    // 시간단위는 ms로 1000이 1초
    if(this_s.nodeType==1){
        this.this_s = this_s;
    }else{
        this.this_s = document.getElementById(this_s);
    }
    this.is_rolling = false;
    this.direction = 1; //1:top, 2:right, 3:bottom, 4:left (시계방향) // 1번과 4번만 됨
    this.children =    null;
    this.move_gap = 1;    //움직이는 픽셀단위
    this.time_dealy = 100; //움직이는 타임딜레이
    this.time_dealy_pause = 1000;//하나의 대상이 새로 시작할 때 멈추는 시간, 0 이면 적용 안함
    this.time_timer=null;
    this.time_timer_pause=null;
    this.set_direction(this.direction);
    this.init_event();
}
js_rolling.prototype.set_direction = function(direction){
    this.direction=direction;
    this.get_element_children();
}
js_rolling.prototype.init_event = function(){
    var this_s=this;
    this.this_s.onmouseover=function(){
        if(!this_s.time_timer_pause){
            this_s.pause();
        }
    }
    this.this_s.onmouseout=function(){
        if(!this_s.time_timer_pause){
            this_s.resume();
        }
    }    
}
js_rolling.prototype.get_element_children = function(){
    this.this_s.style.position='relative';
    this.this_s.style.overflow='hidden';
    var children = this.this_s.childNodes;
    this.children = children;
    for(var i=(children.length-1);0<=i;i--){
        if(children[i].nodeType==1){
            children[i].style.position='relative';
            if(this.direction==1){
                children[i].style.top='0px';
            }else if(this.direction==4){
                children[i].style.left='0px';                
                this.this_s.style.whiteSpace='nowrap';                                        
            }
        }else{
            this.this_s.removeChild(children[i]);
        }
    }
}
js_rolling.prototype.act_move_up = function(){
    for(var i = 0,m=this.children.length;i<m;i++){
        var child = this.children[i];
        child.style.top=(parseInt(child.style.top)-this.move_gap)+'px';
    }
    if((this.children[0].offsetHeight+parseInt(this.children[0].style.top))<=0){
        this.this_s.appendChild(this.children[0]);
        this.get_element_children();
        if(this.time_dealy_pause){
            var this_s = this;
            var act = function(){this_s.resume();this_s.time_timer_pause=null;}
            this.time_timer_pause = setTimeout(act,this.time_dealy_pause);
            this.pause();
        }        
    }
}
js_rolling.prototype.act_move_left = function(){
    for(var i = 0,m=this.children.length;i<m;i++){
        var child = this.children[i];
        child.style.left=(parseInt(child.style.left)-this.move_gap)+'px';
    }
    if((this.children[0].offsetWidth+parseInt(this.children[0].style.left))<=0){
        this.this_s.appendChild(this.this_s.firstChild);
        this.get_element_children();
        if(this.time_dealy_pause){
            var this_s = this;
            var act = function(){this_s.resume();this_s.time_timer_pause=null;}
            this.time_timer_pause = setTimeout(act,this.time_dealy_pause);
            this.pause();
        }                
    }
}
js_rolling.prototype.start = function(){ //롤링 시작
    var this_s = this;
    this.stop();
    this.is_rolling = true;
    var act = function(){
        if(this_s.is_rolling){
            if(this_s.direction==1){this_s.act_move_up();}
            else if(this_s.direction==4){this_s.act_move_left();}
        }
    }
    this.time_timer = setInterval(act,this.time_dealy);
}
js_rolling.prototype.pause = function(){ //일시 멈춤
    this.is_rolling = false;
}
js_rolling.prototype.resume = function(){ //일시 멈춤 해제
    this.is_rolling = true;
}
js_rolling.prototype.stop = function(){ //롤링을 끝냄
    this.is_rolling = false;
    if(!this.time_timer){
        clearInterval(this.time_timer);
    }
    this.time_timer = null
}
//============================================