영원한사랑

롤링 배너용 js(class 형식)

인터넷정보2007. 10. 11. 16:28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>롤링배너</title>
<script type="text/javascript">
/*--------------------------------
롤링배너
만든이 : mins01(공대여자)
hp : mins01.woobi.co.kr
MSN & NateOn : mins01(at)lycos.co.kr
------------=----------------------
사용법
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
<div>
처럼 구조를 가져야합니다.
안의 <div>는 꼭 style.height 값을 가져야합니다.
안에서 <div>가 아닌 것은 전부 삭제됩니다.

var roll2 = new rolling_banner(document.getElementById('test2'));
roll2.start();

처럼 스크립트를 실행하면 됩니다.
----------------------------------*/
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.top='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_top();
 }
 this.timer = null;
 var re = this.ta_id+'.rolling()';
 this.timer = setTimeout(re,this.gap_time);
}
rolling_banner.prototype.rolling_top = function(){
 this.gap_count+=parseInt(this.gap);
 var ch1 = this.ta.firstChild;
 var child = this.ta.childNodes;
 var ta_ch = null;
 var top_ori = this.strtonum(child[0].style.top);
 var top = this.strtopx(top_ori-parseInt(this.gap));  
 for(var i=0,m=child.length;i<m;i++){
  child[i].style.top=top;
 }
 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.top='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);
}

</script>

</head>

<body>
<div id="test" style="width:240px; height:80px;  background-color:#CCCCCC; " ><div style=" width:200px;height:60px;  background-color:#FFCCCC ;"> <a href="http://mins01.woobi.co.kr">제작자 홈피</a> </div>
테스트 무시되는 문자열
<div style="width:200px; height:40px; background-color:#CCFFCC ;"> 내용2 </div>
테스트 무시되는 문자열
<div style="width:200px; height:40px; background-color:#CCCCFF ;"> 내용3 </div>
<div style="width:200px; height:40px; background-color:#CDDCFF ;"> 내용4 </div>
<div style="width:200px; height:40px; background-color:#EECCFF ;"> 내용5 </div>
<div style="width:200px; height:40px; background-color:#CCAAFF ;"> 내용6 </div>
<div style="width:200px; height:40px; background-color:#CCAAFF ;"> 내용7 </div>
<div style="width:200px; height:40px; background-color:#CC22FF ;"> 내용8 </div>
<div style="width:200px; height:40px; background-color:#CC4AFF ;"> 내용9 </div>
<div style="width:200px; height:40px; background-color:#CC6AFF ;"> 내용10 </div>
<div style="width:200px; height:40px; background-color:#CC7AFF ;"> 내용11 </div>
<div style="width:200px; height:40px; background-color:#CC8AFF ;"> 내용12 </div>
<div style="width:200px; height:40px; background-color:#CC9AFF ;"> 내용13 </div>
<div style="width:200px; height:40px; background-color:#CCbAFF ;"> 내용14 </div>
<div style="width:200px; height:40px; background-color:#CCcAFF ;"> 내용15 </div>
<div style="width:200px; height:40px; background-color:#CCdAFF ;"> 내용16 </div>
<div style="width:200px; height:40px; background-color:#CCeAFF ;"> 내용17 </div>
<div style="width:200px; height:40px; background-color:#CCfAFF ;"> 내용18 </div>
<div style="width:200px; height:40px; background-color:#dCAAdF ;"> 내용19 </div>
<div style="width:200px; height:40px; background-color:#1C4AeF ;"> 내용20 </div>
<div style="width:200px; height:40px; background-color:#2CAAcF ;"> 내용21 </div>
<div style="width:200px; height:40px; background-color:#3CAAbF ;"> 내용22 </div>
<div style="width:200px; height:40px; background-color:#4bbAaF ;"> 내용23 </div>
<div style="width:200px; height:40px; background-color:#5C3A9F ;"> 내용24 </div>
<div style="width:200px; height:40px; background-color:#CC2A8F ;"> 내용25 </div>
<div style="width:200px; height:40px; background-color:#CC5A7F ;"> 내용26 </div>
<div style="width:200px; height:40px; background-color:#CC9A6F ;"> 내용27 </div>
<div style="width:200px; height:40px; background-color:#CC8A5F ;"> 내용28 </div>
<div style="width:200px; height:40px; background-color:#CC7A4F ;"> 내용29 </div>
<div style="width:200px; height:40px; background-color:#CC6A3F ;"> 내용30 </div>
<div style="width:200px; height:40px; background-color:#CC5A2F ;"> 내용31 </div>
<div style="width:200px; height:40px; background-color:#CC4A1F ;"> 내용32 </div>
<div style="width:200px; height:40px; background-color:#bC3AFF ;"> 내용33 </div>
<div style="width:200px; height:40px; background-color:#aC1AFF ;"> 내용34 </div>
<div style="width:200px; height:40px; background-color:#9C2AFF ;"> 내용35 </div></div>
내용1~35까지의 div 35개
<script>
var roll1 = new rolling_banner(document.getElementById('test'));
roll1.gap=1;
roll1.gap_time = '1';
roll1.gap_sleep = '1000';
roll1.start();
</script>
<p></p>
<div id="test2" style="width:200px; height:40px; overflow:hidden; background-color:#CCCCCC; ">테스트 무시되는 문자열
<div style=" width:200px;height:60px;  background-color:#FFCCCC ;"> <a href="http://mins01.woobi.co.kr">제작자 홈피</a> </div>
테스트 무시되는 문자열
<div style="width:200px; height:40px; background-color:#CCFFCC ;"> 내용2 </div>
테스트 무시되는 문자열
<div style="width:200px; height:40px; background-color:#CCCCFF ;"> 내용3 </div>
<div style="width:200px; height:40px; background-color:#CDDCFF ;"> 내용4 </div>
<div style="width:200px; height:40px; background-color:#EECCFF ;"> 내용5 </div>
<div style="width:200px; height:40px; background-color:#CCAAFF ;"> 내용6 </div></div>
<script>
var roll2 = new rolling_banner(document.getElementById('test2'));
roll2.gap=1;
roll2.gap_time = '100';
roll2.gap_sleep = '1000';
roll2.start();
</script>

</body>
</html>

'인터넷정보' 카테고리의 다른 글

PHP용 경과시간 체크함수 /php timer 타이머/ microtime()  (0) 2007.10.11
showModalDialog Method (IE 전용)  (0) 2007.10.11
showModelessDialog 를 FF에서 사용하기  (0) 2007.10.11
문자열 <-> 유니코드 변환 escape(),unescape()  (0) 2007.10.11
현재 스크롤 위치 알아내기  (0) 2007.10.11
try{...} catch(e){...} 구문 , e.number,e.description  (0) 2007.10.11
문자열 바이트 길이알기, 바이트만큼 자르기  (0) 2007.10.11
API를 모와둔 사이트 gotapi.com  (0) 2007.10.11
PNG24 반투명 지원법 (IE용)  (0) 2007.10.11
JS 트리구조 메뉴  (0) 2007.10.11

티스토리툴바