마우스 오버시 이미지가 계속 커지게 하는 방법

Java Script & DOM/HTML DOM

마우스 오버시 이미지가 계속 커지게 하는 방법

본클라쓰 2009. 8. 18. 13:31

마우스 오버시 이미지가 계속 커지게 하는 방법

이미지에 마우스를 올리면 이미지가 계속 커지게 하기 위해서는 자바 스크립트의 타이밍 이벤트 메소드를 사용한다. 타이밍 이벤트 메소드는 지정한 시간이 되면 반복적으로 함수를 호출할 수 있다. 타이밍 이벤트 메소드의 종류는 다음과 같다.

setTimeout("자바스크립트 함수", 밀리초)

매개변수로 지정한 밀리초후에 매개변수로 지정한 함수를 실행시키는 함수이다. 밀리초는 1000값이 1초를 말한다.

clearTimeout( setTimeout 변수 )

만약에 셋타임아웃 함수로 무한 루프를 돌릴 경우 clearTimeout() 함수를 호출하면 무한 루프가 종료된다.

타이밍 이벤트로 무한 카운터를 만들어 본 코드

var count = 0;

var timer;

function counter() {

document.getElementById("counter").value = count;

count = count + 1;

timer = setTimeout( "counter()", 1000 );

}

</script>

counter 텍스트 입력폼에 계속 1씩 증가하는 것을 볼 수 있다. 이 카운터를 종료하기 위해서는 브라우저 창을 닫거나 타이머 이벤트를 종료해야 하는 코드를 작성해야 한다.

자바스크립트의 타이밍 이벤트를 사용하여 이미지를 계속 키우는 코드

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-ｅquiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
<!--

var i = 0;
var w = 100;
var h = 180;

function moveover() {

  document.getElementById('image').width=w;
  document.getElementById('image').height=h;
  w=w+1;
  h=h+1;
  timer = setTimeout("moveover()",100);

}

function moveback() {

  document.getElementById('image').width="100";
  document.getElementById('image').height="180";
  w=100;
  h=180;
  clearTimeout(timer);

}
//-->
</script>

</head>
<body>

</body>
</html>

[참고] http://www.w3schools.com/js/js_timing.asp