간단한 롤링 스크립트 > script

간단한 롤링 스크립트

페이지 정보

작성자 서방님 댓글 0건 조회 252회 작성일 07-10-16 18:08

본문

출처 : http://www.x-wiz.com/example/vroll.html

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=53559&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%B7%B9%C0%CC%BE%EE&sop=and


<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<html>
<head>
<title>뎁퍼-엑스위즈 :: JS - VerticalRolling , x-wiz.com</title>
<meta NAME="keywords" Content="javascript,php,programer,developer,xwiz,x-wiz,자바스크립트,프로그래머,개발자,엑스위즈">
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta http-equiv='Cache-Control' content='No-Cache, must-revalidate' />
<meta http-equiv='Pragma' content='No-Cache' />
<meta http-equiv='Expires' content='now' />
<meta http-equiv="imagetoolbar" CONTENT="no"/>
<meta name="robots" content="index, nofallow"/>
<meta name="REVISIT-AFTER" CONTENT="7 days"/>
<meta name="verify-v1" content="y2QWgtfH6RQYpXqaTsnMBN9ApdEEKmsqObAan/pQPlQ=" />
<style>
/**/
dl, dt, dd{margin:0px}
body, table, tr, td, select, textarea, input { font-family:'돋움'; font-size: 12px; line-height: 1.5em;color:#666666}
a, a:link,a:active, a:focus, a:visited {text-decoration: none;color:#666666;outline-style: none;outline-width:0px;outline-color: invert;}
a:hover{text-decoration: none; color: #FF3300}
dt,dd{float:left}
</style>
</head>
<body bgcolor="#FFFFFF">

//-->
</script>
<script language="javascript" type="text/javascript" src="xwz.vroll.js" charset="UTF-8"></script>
<style>
OL, LI{margin:0px}
OL{border:red 1px dotted}
LI{list-style-type: none;margin:0px;float: left;width:100px;height:100px;padding-top:6px;list-style-type:none;text-align:center}
</style>

<ol>

[<a href="xwz.vroll.js">source file</a>]

<div style="margin-top:10px;height:360px;width:955px;overflow:auto;background-color:#F2F2F2;border:#CACACA 2px solid"><xmp>
var xroll1=new xwzVRoll('new_arrival', 'ol', 120);
xroll1.setDirection('dn');
xroll1.setDelaytime(1);
xroll1.on();

/**
* 상하 롤링 라이브러리
* 사람이 아닌 경우에는 이 소스를 사용할 수 없습니다.
* 사람이라면 누구나 쓸 수 있지만 제작자는 표기해주시기를 바랍니다.
* 소스 수정은 배포하지 않는 이상 자유롭게 가능합니다.
* @Param {String, Object} id 또는 대상객체
* @Param {String} TagName 해당 객체의 하위 레이어들
* @author n.thu lee
* @release 2007.04.17
* @updated 2007.04.17
*
* prototype 라이브러리을 다운받아 사용하거나 또는 아래 함수를 현재 파일을 불러오기 이전에 선언해주기 바람.
* Function.prototype.bind = function() { var _$=this,args =[],object=null; for(var i=0,len=arguments.length;i<len;i++) args[i]=arguments[i];object = args.shift();return function(){return _$.apply(object, args);}}
* Function.prototype.bindForEvent=function(obj) {var _$=this;return function(e){var body=document.body||document.documentElement;var hEvent=(e||window.event);hEvent['element']=hEvent.target||hEvent.srcElement;hEvent['cX']=hEvent.pageX||(hEvent.clientX+(body.scrollLeft-body.clientLeft));hEvent['cY']=hEvent.pageY||hEvent.clientY+body.scrollTop-body.clientTop;return _$.call(obj, hEvent);}}
*/
var xwzVRoll=function(srcById,targetTag,height){
  if(typeof srcById =='string') this.frame=document.getElementById(srcById);
  else if(typeof srcById =='object') this.frame=object;
  else{alert('대상 객체값이 유효하지 않습니다.');return false;}

  this.Nodes=[];/*대상객체*/
  this.height=height||this.frame.offsetHeight||parseInt(this.frame.style.height||0);/*높이*/
  this.direction='updn';/*방향*/
  this.bPause=false;/*일시멈춤*/
  this.nDelay=3000;/*지연시간*/
  this.nPeriod=30;/*이동속도 제어값*/
  this.index=0;/*INCREMENT*/
  this.resTime=null;/*타임리소스*/
  this.length=0;/*전체갯수*/
  this.Queue=[];/*이동할 대상의 객체 배열*/
  this.dd=this.direction.indexOf('dn')!==-1;/*이동방향 BOOLEAN 값*/

  /*실 초기화*/
  var itms=this.frame.getElementsByTagName(targetTag);
  this.length=itms.length;

  this.frame.style.overflow='hidden';
  this.frame.style.position='relative';
  if(!this.frame.style.height) this.frame.style.height=this.height+'px';
  /**/
  for(var i=0;i<this.length;i++){
   if(!itms[i].style.height) itms[i].style.height=this.height+'px' ;
   itms[i].style.position="absolute";
   if(this.dd) this.Nodes.unshift(itms[i]);else this.Nodes.push(itms[i]);

  };
  for(var i=0;i<this.length;i++){this.Nodes[i].style.top=(this.height*(this.dd?((this.length-1-i)*-1):i))+'px';}
};
xwzVRoll.prototype={
/**
* 다음 객체가 이동할 동안의 지연시간 설정 함수
* @Param {Number}
* @Return {Number}
*/
setDelaytime:function(nVal){
  var n=nVal||(this.nDelay/1000);
  return this.nDelay=Math.abs(n*1)*1000;
},
/**
* 이동속도 제어값 설정함수
* @Param {Number}
* @Return {Number}
*/
setPeriod:function(nVal){
  var n=nVal||(this.nPeriod);
  return this.nPeriod=Math.abs(n*1);
},
/**
* 다음 객체가 이동할 동안의 지연시간 설정 함수
* @Param {String} 이동방향설정 [up,dn,updn]
* @Return {String}
*/
setDirection:function(strVal){
  strVal=(strVal||this.direction).toString().toLowerCase();
  if((/^(up|dn|updn)$/).test(strVal)==false||this.direction==strVal) return this.direction;

  this.dd=strVal.indexOf('dn')!==-1;/*이동방향 BOOLEAN 값*/
  var a= this.Nodes;this.Nodes=[];
  for(var i=0;i<this.length;i++){
   if(this.dd) this.Nodes.unshift(a[i]);else this.Nodes.push(a[i]);
  };

  for(var i=0;i<this.length;i++){this.Nodes[i].style.top=(this.height*(this.dd?((this.length-1-i)*-1):i))+'px';}
  this._stack();
  return this.direction=strVal;/*방향*/
},
/**
*외부 실행 함수
*/
on:function(){
  this.onmouseover=new Function("this.bPause=true").bindForEvent(this);
  this.onmouseout=new Function("this.bPause=false;this._aviate()").bindForEvent(this);
  this.frame.onmouseover=this.onmouseover;
  this.frame.onmouseout=this.onmouseout;
  this.resTime=setTimeout(this._aviate.bind(this),this.nDelay);
},
/**
* 각 객체 간 실제 이동 제어 함수
*/
_stack:function(){
  var dY=pY=0,o=null,a=[];
  this.Queue=[];
  /*아래로 이동하는 경우 이전에 이동된 객체를 첫번째 요소로 이동.*/
  if(this.dd && this.index>0){
   o=this.Nodes[this.length-1];this.Nodes.pop();this.Nodes.unshift(o);o.style.top=(this.height*(this.length-1)*-1)+'px';
  /*위로 이동하는 경우 이전에 이동된 객체를 마지막 요소로 이동한다.*/
  }else if(!this.dd && this.index>0){
   o=this.Nodes[0];this.Nodes.shift();this.Nodes.push(o);o.style.top=(this.height*(this.length-1))+'px';
  }
  if(this.bPause==true) return;
  /*INCREMENT*/
  this.index++;
  /*순환형태가 아닌 up<->down반복일때*/
  if(this.index==this.length&&this.direction=='updn'&&this.dd){
   /*swap*/
   a[0]=this.Nodes[this.length-1];for(var i=1;i<this.length;i++){a[i]=this.Nodes[i-1];}this.Nodes=a;
   /*위치 재 지정*/
   for(var i=0;i<this.length;i++) this.Nodes[i].style.top=(this.height* i) + 'px';
   this.dd=false;
  }else if(this.index==this.length-1&&this.direction=='updn'&&!this.dd){
   /*swap*/
   for(var i=1;i<this.length;i++){a[i-1]=this.Nodes[i];}a[this.length-1]=this.Nodes[0];this.Nodes=a;
   /*위치 재 지정*/
   for(var i=0;i<this.length;i++) this.Nodes[i].style.top=(   this.height* ((this.length-1-i)*-1) ) + 'px';
   /*방향상태값변경 후 중단*/
   this.dd=true;this.index=0;return false;
  }
  a=null;
  /*이동대상 객체 선정 및 해당 객체의 이동단계값구하기*/
  for(var i=0;i<this.length;i++){
   pY=this.height* ( this.dd?(this.length-(2+i))*-1:i-1 );
   dY=pY-parseInt(this.Nodes[i].style.top);
   if(dY==0) continue;
   this.Queue[this.Queue.length]={style:this.Nodes[i].style,distY:dY,posY:parseInt(this.Nodes[i].style.top),mvY:pY,nBaud:dY!=0?0:this.nPeriod};
  }
  if(this.index>this.length) this.index=0;
},
/**
* 주어진 객체의 위치를 제어함수
*/
_aviate:function(){
  clearTimeout(this.resTime);this.resTime=null;
  var Toggle=null,Queue=[];
  var dY=0, nsec=0;
  for(var i=0,len=this.Queue.length;i<len;i++){
   Toggle=this.Queue[i];
   /*해당객체의 이동 카운트를 넘지 않은 경우 위치이동제어*/
   if(Toggle.nBaud < this.nPeriod){
    dY = Math.round(Math.sin(Toggle.nBaud / this.nPeriod*Math.PI/2)*Toggle.distY);
    Toggle.style.top=(Toggle.posY+dY)+'px';
    Toggle.nBaud++;
   }
   /*해당객체의 이동 카운트를 넘는경우 놓여질 위치에 객체 위치를 선정하고 중단*/
   if(Toggle.nBaud >= this.nPeriod ){
    Toggle.style.top=(Toggle.mvY)+'px';
   }else{
    Queue[Queue.length]=Toggle;
   }
  };
  /*객체이동이 끝난 경우 일시정지 후 중단*/
  if(Queue.length==0){
   /*일시 정지*/
   if(this.bPause==true){ return false;}
   this._stack();
   nsec=this.nDelay;
  }else{
   this.Queue=Queue;
  }
  this.resTime=setTimeout(this._aviate.bind(this),nsec);
}

}</xmp>
</div>
<div style="text-align:center">
<div style="width:950px;margin:0px auto;margin-top:10px">
PHP 스쿨에 올린 자료 대충 메뉴로 묶었습니다 -_-; 여기에 소스는 사람이면 누구나 사용이 가능하며 배포하실 수 있습니다. 소스 수정은 들키지만 않으면 수정 가능합니다.<br>
<dl style="border:#CACACA 1px solid;height:40px;background-color:#F2F2F2;">
<dd style="margin:10px 4px 1px 4px;"><a href="/example/dtp2.html">달력-IE 전용</a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/roll.htm" onclick="alert('오류로 차후 수정 예정');return false">레이어효과 1</a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/ajax.control.php">Multi Ajax Control </a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/gadgetry.html">Gadgetry-move, drag & drop</a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/scaledrop.html">drag & drop, resize</a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/vroll.html">Vertical Rolling</a></dd>
<dd style="margin:10px 4px 1px 4px;">|</dd>
<dd style="margin:10px 4px 1px 4px;"><a href="/example/verticalstrip.html">Vertical Strip</a></dd>

</dl>
<div style="margin:4px 10px 1px 4px;">
<div style="float:left"><a href="http://www.myhangeul.com/myad/?disp=2" target='_blank'><img src="http://myhangeul.com/myad/ucif/b/spolite_b6c1b594da5fe3c56a99b2fae9adaf75_BA.gif" width="367" height="32" border="0"></a></div>
<div style="float:right"><font color=#000000>Copyright(c) 2004. <strong>X-<font color="#FF6600">w<font color=#007bff>i</font>z</font><font color=#636363>.com</strong></font> All rights reserved.</font></div>
</div>
</div>

</div>
<script language='javascript' id='log_script' src='http://weblog004.cafe24.com/weblog.js?uid=spolite&uname=x-wiz'></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">_uacct = "UA-1389980-1";urchinTracker();</script>

</body>
</html>

댓글목록

등록된 댓글이 없습니다.

번호	제목	글쓴이	조회	날짜
486	다음초기화면 레이어 구성	서방님	116	10-16
485	네이버 초기화면 랜덤뉴스 표출 부분	서방님	248	10-16
열람중	간단한 롤링 스크립트	서방님	253	10-16
483	3 of 9 바코드 그리기	서방님	107	10-16
482	jsclass_layer (레이어 제어 클래스)	서방님	186	10-16
481	지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) 2번째	서방님	405	10-16
480	showid simple script	서방님	165	10-16
479	심플한 레이어 팝업 공지	서방님	275	10-16
478	허접 -div제어 javascript 입니다	서방님	371	10-16
477	[스크립트] 깔끔한 웹용 시계달력	서방님	249	10-01
476	QueryString 값을 가져올수 있는 자바 스크립트 입니다.	서방님	143	09-03
475	javascript String prototype 정리	서방님	311	09-03
474	자바스크립트 정규식 정리	서방님	243	09-03
473	문제 풀면 수우미양가 나오는 스크립트	서방님	320	08-30
472	새로고침과 창닫기 구분	서방님	246	08-24

간단한 롤링 스크립트 > script

인기검색어

script