YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

롤링(가로세로?)

페이지 정보

작성자 MintState 댓글 0건 조회 11,836회 작성일 08-11-17 14:05

본문

롤링(가로세로?)

var rolling_banner = function(ta){
	this.ta = ta;
//	this.ta.className = 'rolling_banner';	
	this.ta_id = 'roll_'+(this.ta.id||this.ta.name);
	this.gap = 5;					//움직이는 픽셀단위
	this.gap_count=0;			//카운팅용:건들지 마세요
	this.gap_time = '1000';		//움직이는 단위시간
	this.gap_sleep = '2000';	//화면이 멈춰있을 단위시간
	this.over_stop = true;  //마우스를 올렸을 때 멈출 것인가?
	this.timer = null;
	eval(this.ta_id+'=this');
	var temp = eval(this.ta_id);
	this.init_div();	
}
rolling_banner.prototype.start = function(){	//롤링 시작
	this.ta.readonly =false;
	this.stop =false;	
	if(!this.timer){ this.rolling();	 }
}
rolling_banner.prototype.stop = function(){	//롤링 시작
	this.stop =true;
}
rolling_banner.prototype.init_div = function(){	//<div> 빼고 전부 제거 , 스타일 초기화
	this.ta.style.position="relative";
	this.ta.style.overflow="hidden";
  	this.ta.onmouseover=function(){ eval("this.readOnly=true;"); }
  	this.ta.onmouseout=function(){ eval("this.readOnly=false;"); }

	var child = this.ta.childNodes;
	var ch = this.ta.firstChild;
	var ch2 = null;
	while(ch){
		ch2 = ch.nextSibling;
		if(ch.nodeName.toLowerCase() !='div'){
		this.ta.removeChild(ch);
		}else{
		ch.style.position = "relative";
		ch.style.borderStyle='none';
		ch.style.left='0px';
		}
		ch=ch2;
	}
}
rolling_banner.prototype.strtonum = function(str){
	var num = parseInt(str);
	if(isNaN(num)) num = '0';
	return num
}
rolling_banner.prototype.strtopx = function(str){
	var num = this.strtonum(str);
	return num+'px';
}
rolling_banner.prototype.rolling = function(){
	if(this.gap_count==0){
		this.sleep();
		this.gap_count+=1;
		return;
	}
	if(!this.ta.readOnly && !this.stop){
		this.rolling_left();
	}
	this.timer = null;
	var re = this.ta_id+'.rolling()';
	this.timer = setTimeout(re,this.gap_time);
}
rolling_banner.prototype.rolling_left = function(){
	this.gap_count+=parseInt(this.gap);
	var ch1 = this.ta.firstChild;
	var child = this.ta.childNodes;
	var ta_ch = null;
	var	left_ori = this.strtonum(child[0].style.left);
	var left = this.strtopx(left_ori-parseInt(this.gap));			
	for(var i=0,m=child.length;i<m;i++){
		child[i].style.left=left;
	}
	if(this.gap_count >= this.strtonum(ch1.style.height)){
		var temp =ch1.cloneNode(true);	
		this.ta.removeChild(ch1);
		this.ta.appendChild(temp);
		for(var i=0,m=child.length;i<m;i++){
			child[i].style.left='0px';
		}		
	this.gap_count = 0		
	}
}
rolling_banner.prototype.sleep = function(){
	this.timer = null;
	var re = this.ta_id+'.rolling()';
	this.timer = setTimeout(re,this.gap_sleep);
}

/* 사용방법
<div id="test" style="width:400px; height:40px;  background-color:#CCCCCC; " >
	<div style="float:left;padding:0 0 0 3;width:200px; height:40px; background-color:#CC8A5F ;"> 내용1 </div>
	<div style="float:left;padding:0 0 0 3;width:200px; height:40px; background-color:#5C3A9F ;"> 내용2 </div>
	<div style="float:left;padding:0 0 0 3;width:200px; height:40px; background-color:#CC5A2F ;"> 내용3 </div>
	<div style="float:left;padding:0 0 0 3;width:200px; height:40px; background-color:#CC4AFF ;"> 내용4 </div>
</div>
<script>
var roll1 = new rolling_banner(document.getElementById('test'));
roll1.gap=111;
roll1.gap_time = '1';	
roll1.gap_sleep = '2000';
roll1.start();
</script>
*/

댓글목록

등록된 댓글이 없습니다.

Total 178건 3 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
138 MintState 15205 11-17
137
세로롤링 댓글+ 1
MintState 13120 11-17
열람중 MintState 11837 11-17
135 MintState 11488 11-17
134 MintState 13141 11-17
133 MintState 13023 11-17
132 MintState 13643 11-17
131 MintState 14373 11-17
130 MintState 13532 11-17
129 MintState 11714 11-17
128 MintState 12574 11-17
127 MintState 13369 11-17
126 MintState 12606 11-17
125 MintState 16417 11-17
124 MintState 14004 11-17
123 MintState 8651 11-17
122 MintState 13204 11-17
121 MintState 13984 11-17
120 MintState 7877 11-17
119 MintState 8504 11-17
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2021, YesYo.com MintState. ™