Daniel's Knowledge Storage

텍스트, 이미지 한줄씩 롤링시키기 HTML+Script 본문

Develop/자바스크립트

텍스트, 이미지 한줄씩 롤링시키기 HTML+Script

다니엘SEO 2009. 4. 25. 15:54


아주 유용한 소스 입니다.
DIV를 한줄씩 롤링 시킵니다. 한줄 나오고 지정한 시간 만큼 멈췄다가 다시 다음 줄 나오고...식이죠^^


<!-- 기본 스타일이라 빼왔습니다 디자이너시니 임의데로 바꿔쓰세여  -->
<style type="text/css">
<!--
A:link   {color:#000000; text-decoration:none;}
A:visited  {color:#000000; text-decoration:none;}
A:hover   {color:#F85603; text-decoration:none;}

/* 본문 */
body  {font-family:"돋움";background-color:#FFFFFF;margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}
td   {font-family:"돋움";font-size:12px;color:#717171; line-height:15px;}
font       {font-family: verdana;font-size:8pt; line-height:16px; letter-spacing:-0.03em;}

/* 이미지 border=0 */
img {border:0px none; }
-->
</style>
<!-- 기본 스타일이라 빼왔습니다 디자이너시니 임의데로 바꿔쓰세여  -->


<!--  여긴 손대실꺼 없습니다 .. -->
<script>
// banner_roll("div태그 id", 배너1개높이, 딜레이, 1칸이동속도, 0);
function banner_roll(div_id, banner_height, banner_delay, banner_speed, this_height)
{
    var div_tag = document.getElementById(div_id);
    var a_tag, i;
   
    this_height ++;
    if(this_height < banner_height) {
        div_tag.style.top = -this_height;
        setTimeout("banner_roll('" + div_id + "', " + banner_height + ", " + banner_delay + ", " + banner_speed + ", " + this_height + ");", banner_speed);
    } else {
        a_tag = div_tag.getElementsByTagName("A");
        div_tag.appendChild(a_tag[0]);
        div_tag.style.top = 0;
        setTimeout("banner_roll('" + div_id + "', " + banner_height + ", " + banner_delay + ", " + banner_speed + ", 0);", banner_delay);
    }

    return true;
}
</script>
<!--  여긴 손대실꺼 없습니다 .. -->

 


<!-- 이부분만 사이트 사이즈에 맞게  수정하시면 됩니다.. 링크가 필요 없으시면 a 테그 쓰지마세여  id ="banner_1"  이게 중요합니다 -->
<table width="757" border="0" cellspacing="0" cellpadding="0">

 <tr>
  <td height="62">
   <div style="position:absolute; width:200px; height:18px; overflow:hidden; left: 482px; top: 159px;">
       <div style="position:relative; left: 9px; top: 11px;" id="banner_1">
         <a href="#" style="display:block; height:18px;">롤링1</a>
          <a href="#" style="display:block; height:18px;">롤링2</a>
          <a href="#" style="display:block; height:18px;">롤링3</a>
          <a href="#" style="display:block; height:18px;">롤링4</a>
        </div>
      </div>
    </td>       
  </tr>
 
</table>


<!-- 이부분만 수정하시면 됩니다.. -->


<!-- 이부분은 반드시 위에보다 밑에 있으야 합니다 ,, 이부분도 수정하실꺼 있음 하시면 됩니다 .. -->
<script>
// banner_roll("div태그 id", 배너1개높이, 딜레이, 1칸이동속도, 0);

banner_roll("banner_1", 18, 2000, 40, 0);
</script>

<!-- 이부분은 반드시 위에보다 밑에 있으야 합니다 ,, -->

Comments