JavaScript에서 기본 Animation을 구현하려면 DOM 개체 속성과 JavaScript를 사용합니다. 다음 목록에는 다양한 DOM 메서드가 포함되어 있습니다.
- 자바스크립트 함수 getElementById()를 사용하고 있습니다. DOM 개체를 가져온 다음 전역 변수 imgObj.에 할당합니다.
- 초기화 함수 init()을 정의했습니다. 초기화 imgObj 위치 를 설정해야 하는 위치 및 왼쪽 속성.
- 창 로드 시 초기화 함수를 호출하고 있습니다.
- 마지막으로 moveRight()를 호출합니다. 왼쪽 거리를 10픽셀 늘리는 기능입니다. 추가로 음수 값으로 설정하여 왼쪽으로 이동할 수 있습니다.
<html>
<head>
<title>JavaScript Animation</title>
<script>
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>