Notice
Recent Posts
Recent Comments
Tags more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

position연습 3 - tickerTape 예제 본문

카테고리 없음

position연습 3 - tickerTape 예제

http://portfolio.wonpaper.net 2018. 11. 22. 02:09

<!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=UTF-8" />
<title>TickerTape 예제</title>

<style type="text/css">
 #ticker {width:200px;height:70px;
  position:relative;     /* 하위요소들의 기준좌표 역할을 위해 */
  border:1px solid red;
  overflow:hidden;    /* 자식요소들중 부모의 영역을 벗어난 부분은 안보이게함. */
 }
 #tape {position:absolute;left:190px;width:500px;}
</style>

<script type="text/javascript">
 var tape_left=200;
 window.onload=function(){  // annoymous function
    move();  /*페이지 로딩시 자동실행 */  
 } 
 
 function move() {
  var tape = document.getElementById("tape");
  tape.style.left = tape_left + "px";
  tape_left -= 10; // 음수는 왼쪽으로 이동
  if (tape_left < -400) // 화면에서 글자가 사라지면
   tape_left = 200;   // 위치가 초기화 됨
//  setTimeout(move, 300);   // 300 릴리초 후 move실행  , move 는 window.move 가 생략된것임
     setTimeout("move()", 100); // 300 릴리초 후 move실행
  
 }
</script>
</head>
<body>
 
 <div id="ticker">
  <div id="tape">안녕하세요,HTML5 기반 모바일 &amp; 하이브리드앱 과정입니다.</div>
 </div>
</body>
</html>

 

 

위의 결과 화면처럼 전광판처럼 스크롤되어 오른쪽에서 왼쪽으로 움직이며, 영역을 벗어나는 내용은 화면에 나타나지 않는다.

위의 window.onload 는 body 태그의 onload 속성과 같은 것인데,

웹표준형태로 보다 깔끔하게 코딩하였다.

 

 

 

Comments