자막 수직 스크롤 디 스 플레이 효과

얼마 전에 웹 광고 페이지 를 만 들 고 흔히 볼 수 있 는 효 과 를 만 들 었 습 니 다. 먼저 자막 을 수직 으로 스크롤 하여 표시 하 는 필터 페이지 를 보 내 고 아래 의 코드 를 보 냅 니 다.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>    </title>
</head>
<style type="text/css">
  td {font-size: 16px;}
 .marqueeLine {
     height:40px;
	 vertical-align:middle;
 }  
</style>
<body>
<table width="490" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div id="marqueeBox" style="overflow:hidden;height:40px">
        <table  border="0" cellpadding="0" cellspacing="0">
          <tr class="marqueeLine">
            <td><a href="#" target="_blank">1     ,                  !</a></td>
          </tr>
          <tr class="marqueeLine">
            <td><a href="#" target="_blank">2     ,                 。</td>
          </tr>
          <tr class="marqueeLine">
            <td><a href="#" target="_blank">3        ,   ,       ,   。</a></td>
          </tr>
          <tr class="marqueeLine">
            <td><a href="#" target="_blank">4          ,     ,      。</a></td>
          </tr>
          <tr class="marqueeLine">
            <td><a href="#" target="_blank">5         (   、   )      。</a></td>
          </tr>
        </table>
      </div></td>
  </tr>
</table>
</body>
<script type="text/javascript">
  var marqueeDelay=2000; //    
  var marqueeHeight=40; //    
  var lines = 5;
  var marqueeBox = document.getElementById("marqueeBox"); 
  var rollval;
  var backval;
 
function backMarquee() {
	 marqueeBox.scrollTop--;
	 if(marqueeBox.scrollTop==0){
		 clearInterval(backval);
		 setTimeout('rollstart()',marqueeDelay);
     }
 } 
 
function scrollMarquee() {
	 marqueeBox.scrollTop++;
     if(marqueeBox.scrollTop%marqueeHeight==0){
        clearInterval(rollval);
		if(marqueeBox.scrollTop==marqueeHeight*(lines-1))
		    setTimeout('scrollback()',marqueeDelay); 
		else
		    setTimeout('rollstart()',marqueeDelay); 
    }
}

function scrollback() {
   backval= setInterval('backMarquee()',4);
}

function rollstart() {
   rollval= setInterval('scrollMarquee()',50);
}

setTimeout('rollstart()',marqueeDelay); 
</script>
</html>

 
굴 러 가 는 내용 을 조금 만 개조 하면 그림 의 굴 러 가 는 재생 을 실현 할 수 있다.

좋은 웹페이지 즐겨찾기