글(컨텐츠) 이 위로 스크롤 되는 롤링 div 만들기

안녕하세요, 대도루피 입니다.
제대로된 첫 강좌 이려나요.
강좌를 작성하는 목적은, 제 자신이 잊어버릴 수도 있는 부분이라 기록하기 위함과 동시에,
같은 기능을 필요로 하시는 분께서 쉽게 사용하시라고 만든거고요..
최적화 까지는 아니더라도, 사용하기 쉽고 알아보기 쉽게 작성하였습니다. ^^
설명은, 소스로 대체할게요 ^^
소스는 펌이 아닌, 직접 작성한 내용들입니다.

<script language="Javascript">
<!--
 var y=0; //y축 좌표
 var count=0; //y축 증가값 리셋
 var contentArray = new Array(); //컨텐츠 내용 배열
 var start=0; //0번부터
 var end=9;  //9번 까지 총 10개의 컨텐츠
 var now=0; //현재 추가하는 번호
 var newDiv;
 var hover=1; //마우스 오버시 0이면 멈춤
 var oTime;
 function addContent() { //컨텐츠 2개 추가
  if(now >= end) now=0;
  var dom = document.getElementById("innerBox");
  newDiv = document.createElement("div");
  newDiv.style.height = "100px";

  var sub1 = document.createElement("div");
  sub1.style.paddingBottom = "5px";
  sub1.innerHTML = contentArray[now];
  now++;
  var sub2 = document.createElement("div");
  sub2.innerHTML = contentArray[now];
  now++;

  newDiv.appendChild(sub1);
  newDiv.appendChild(sub2);
 
  dom.appendChild(newDiv);
 
 }
 function status() { //롤링 처음 실행시에만 호출
  addContent();
  addContent();
  setTimeout("run()",1000);
 }
 function run() { //롤링 반복 작업
  oTime = setInterval("rolling()",10);
 }
 function rolling() {
  if(hover==1) {
   y-=1;
   count+=1;
   var dom = document.getElementById("innerBox");
   dom.style.top= y + "px";
   if(count==100) { //롤링을 멈추고 기다림
    count=0;
    addContent();
    clearInterval(oTime); //롤링 멈춤
    setTimeout("run()",1000); // 1초후 다시 롤링 시작
   } else {
    //oTime = setTimeout("rolling()",10);
   }
  }
 }
 function makeContent() {
  <? getData(); ?>
 }
-->
</script>

간략한 설명을 하자면, 가장 밑에 makeContent() 부분이 출력할 데이터 목록을 만드는 부분인데요.
contentArray 라는 array 변수를 생성해 두었는데, getData(); 부분은 php함수를 호출해서
DB로 부터 데이터를 읽어 contentArray[0] 번부터 시작해서 원하는 숫자 만큼 데이터를 입력받으시면 됩니다.

초급 프로그래머 이시면, 충분히 하실 수 있겠죠..?
해당 작업을 makeContent() 에서 처리하시고요,, 홈페이지 내에서 롤링을 추가하시고 싶은 위치에서
makeContent() 함수를 호출하시면 되요.

그다음, status() 함수를 연이어 호출 하시면, 롤링의 작동이 시작됩니다.

변수는 start와 end 가 있는데 start는 0 적어주시면 되고, end는 출력하실 갯수(DB에서 읽어온 아이템 갯수)
에서 1을 뺀 값을 입력하시면 되겠죠? 0번부터 시작이니까요.

그리고 status() 함수느 rolling() 함수 내에 setTimeout 함수가 있는데 적혀있는 숫자 1000은 대기시간이에요.
ms(밀리세컨드) 로 계산합니다. 1000이면 1초가 되겠죠? ^^
시간 길게 하고 싶으시면 바꿔주시면 되고요.. 그다음 호출하는건 10ms 로 호출하면서
div의 top 을 -1 씩 빼서 위로 스크롤 되는 효과를 만들어 줍니다...
응용하시면, 처음에는 빠르다가 점점 느려지는 작업도 가능하겠죠? 그부분은 알아서....^^;;

그리고 정말 중요한 부분!
빨간 색으로 표시한 innerBox 는요,, 다른 명령어나 그런게 아니고요,

html 내부의 div 의 id값 입니다. getElementById 로.. 해당 객체를 가져오죠..?
그래서 컨트롤 가능한거에요..

innerBox의 div 스타일은 꼭 absolute 혹은 relative 등으로 설정해주세요...
그래야 top 스타일 값을 사용할 수 있거든요.

<div id="content">
 <div id="box">
  <div id="innerBox" onMouseOver = "hover=0;" onMouseOut = "hover=1;">
   <script language="javascript">
    makeContent();
    status();
   </script>
  </div>
 </div>
</div>

위는 본문의 div구조인데요..  스타일 시트를 보시면 이해가 되시려나요..

<style type="text/css">
 * { font-face:굴림; font-size:9pt }
 ol { list-style:none;margin:0; }
 img,div { margin:0;padding:0;border:0 }
 a:link,a:visited,a:hover { text-decoration:none; color:#000; }
 #content { width:187px;height:115px;position:relative;top:-4px;
  background-image:url("사진 url");
  background-repeat:no-repeat;
 }
 #box { width:187px;height:100px; position:relative;
  padding-left:10px; padding-bottom:30px;overflow:hidden;
 }
 #innerBox { width:187px;height:100px; position:absolute; top:0px}
 ol.data { height:100px; }
</style>

innerBox를 감싸고 있는 외부인 box를 overflow: hidden 시켜주세요..
가로 세로 크기는 지정해주시고요.. 그래야, 감춰지겠죠? ^^

잘 사용하시고요,
버젼 업 되면 다시 포스팅 할게요 ^^