롤링(가로세로?)
로빈아빠
본문
롤링(가로세로?)
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> */
관련링크
댓글목록
등록된 댓글이 없습니다.