2010년 3월 10일 수요일

가로로 스크롤 하는 이미지 소스

<div style="width:270px; height:77px; background-image:url(/images/scroll_room_bg.gif);">
  <script language="javascript">
 var htmlstr_m = "",
  flag=true,
  mouse=1,
  speed=1,
  wait=0,
  temp=0,
  m_amount=260,
  m_left=84;
   
 var ctnt=new Array(), i=0, j=0;
   
 function startText_m() {
  for (i=0; i<ctnt.length; i++) insertText_m(i);
  window.setTimeout("scroll_m()",wait);
 }
   
 function scroll_m() {
  if (mouse && flag) {
   for (i=0;i<ctnt.length;i++) {
    temp++;
    tmp = document.getElementById('scroll_area'+i).style;
    tmp.left = parseInt(tmp.left) - 1;
    if (parseInt(tmp.left) <= m_left*(-1)) {
     tmp.left = m_left*(ctnt.length-1);
    }
    if (temp>(m_amount-1)*ctnt.length) {
     flag=false;
     temp=0;
     window.setTimeout("flag=true;temp=0;",wait);
    }
   }
  }
  window.setTimeout("scroll_m()",speed);
 }
   
 function insertText_m(i) {
  htmlstr_m='<div style="left:'+((m_left)*i)+'px; width:'+(m_amount+0)+'px; position: absolute; top: 0px;padding:0 0 0 0" id="scroll_area'+i+'">\n';
  htmlstr_m+=ctnt[i]+'\n'+'</div>\n';
  document.write(htmlstr_m);
  //alert(i + " " + htmlstr_m);
 }
 ctnt[0] = "<img src='/images/scroll_room1.gif' width='64' height='61' />";
 ctnt[1] = "<img src='/images/scroll_room2.gif' width='64' height='61' />";
 ctnt[2] = "<img src='/images/scroll_room3.gif' width='64' height='61' />";
 ctnt[3] = "<img src='/images/scroll_room1.gif' width='64' height='61' />";
 ctnt[4] = "<img src='/images/scroll_room2.gif' width='64' height='61' />";
 ctnt[5] = "<img src='/images/scroll_room3.gif' width='64' height='61' />";
  </script>
  <div style="height: 64px; width: 260px; position: absolute; overflow:hidden; margin-top:6; margin-left:5;" onMouseover="mouse=0" onMouseout="mouse=1" id="scroll_div"><script language="Javascript">startText_m();</script></div>
</div>


 

댓글 1개:

  1. 소스 제공 감사드립니다. 기존에 pixelLeft 를 사용하여 가로로 사진을 스크롤하는 소스가 크롬과 파이어팍스에서 동작하지 않아서 애를 먹었는데 이 소스 때문에 한방에 해결했네요. 다시한번 소스 제공에 감사드린다는 말씀 드립니다. 늘 댁네에 행복과 행운, 건강이 함께하시길 기원합니다. 꾸벅~

    답글삭제