자바 스크립트 예제(5)

  

문자열 상하 스크롤

 

 

이번에는 상하로 스크롤되는 글들을 만들어 봅니다. 주의할 것은 이번에 만들어 볼 자바 스크립트는 넷스케이프 3.0 이상에서만 작동한다는 것입니다. 문자열들을 상하로 스크롤하기 위해 사용하는

가장 중요한 구문은 다음과 같습니다.

 

window.scroll(x, y)

 

이것은 자바스크립트 1.1에서 새로 제공되는 scroll 도구를 이용하는 방법인데, 여기서 x, y는 각각 픽셀 단위의 값으로 윈도우상의 x, y 좌표를 나타냅니다. 그럼 예제를 만들어 봅시다.

 

<HTML><HEAD>

<SCRIPT LANGUAGE = "JavaScript">

 

var timer = 0;

function up_move(h) {

window.scroll(0,h);

setTimeout("polling()",60);

}

 

function polling() {

if(timer > 100) {

timer = 0;

}

h = (timer * 2);

timer++;

up_move(h);

}

setTimeout("polling()",1000);

 

</SCRIPT>

</HEAD>

<BODY BGCOLOR="#000000" TEXT="#FFFF80">

<font size=4>

<center>

자바 스크립트의 세계에 오신 것을 환영합니다.

<BR><BR>

<FONT COLOR="#80FF80">

이 스크립트는 상하로 문자열을 스크롤합니다.

<BR><BR></font>

<FONT COLOR="#FF80FF">

단, 넷스케이프 3.0 이상에서만 실행됩니다.

<BR><BR></font>

<font color="#ffff80">

스크롤이 되지 않으면 브라우저 크기를 줄여 보세요.

<BR><BR></font>

<font color="#80ff80">

잘 작동하면 자신의 홈페이지에도 넣어 보세요.

<BR><BR></font>

</center>

</BODY></HTML>

 

여기서 up_move(h)에 쓰인 h값을 적절히 지정함으로서 스크롤되는 양을 정할 수 있습니다.

위에서는 이를 200정도로 하고 본문의 라인을 10줄 정도 넣었습니다.

 

이 스크립트는 전체 문자열의 높이보다 브라우저 창의 크기가 작아야 스크롤되는 것을 볼 수 있으므로 프레임에서 사용하면 더 좋습니다. 예를 들면 다음과 같은 형식의 html 화일에서 사용할 수 있습니다.

먼저 두 개의 프레임으로 나누는 html 화일입니다.

 

<HTML>

<HEAD>

<TITLE> 위 아래로 프레임을 만듭니다 </TITLE>

</HEAD>

<FRAMESET ROWS="40,*" border=1>

<FRAME SRC="frame1.html" NAME="frame1" >

<FRAME SRC="frame2.html" NAME="frame2">

</FRAMESET>

</HTML>

 

frame1.html은 위의 예를 그대로 이용하면 됩니다.

frame2.html은 다음과 같이 합니다.

 

<HTML><HEAD></HEAD>

<BODY BGCOLOR="#000000" TEXT="#00FF00">

<BR><BR><BR><center>

이 예제는 상하로 스크롤되는 스크립트를 보여주는 것입니다.<BR><BR>

<BR><BR>

<FORM>

<INPUT TYPE="button" VALUE="윈도우 닫기" onClick="parent.window.close()">

</FORM>

</center>

</BODY>

</HTML>