롤링(가로세로?)
페이지 정보
작성자 MintState 댓글 0건 조회 15,504회 작성일 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>
*/|
|
댓글목록
등록된 댓글이 없습니다.





롤링(가로세로?)