JavaScript로 애니메이션 효과 구현

모두가 Dreamweaver의 타임라인 기능을 사용하여 흥미로운 애니메이션 효과를 만들고 있습니다. Dreamweaver는 사용자를 위한 특정 프로그램 코드를 자동으로 생성합니다. 사실 원리는 매우 간단합니다. 주로 타이머 기능을 사용합니다. 아래에서는

관련 소개를 통해 추론을 이끌어내고 더 멋진 애니메이션을 만들 수 있습니다. 효과.

이 예제의 효과는 웹페이지에서 "이동 시작" 버튼을 클릭하는 것이며, 이 과정에서 "이동 중지" 버튼을 클릭하면 지정된 레이어가 왼쪽에서 오른쪽으로 이동합니다. 움직이지 않을 것입니다.

　

　
　

　<script></script> var MovingID = null;
var scrolling = false;

function startMove()
{
var left = eval(div1.style.left.replace("px", "") );
if (left < document.body.scrollWidth - 150)
div1.style.left = left + 1;
else
div1.style.left = 10;
MovingID = setTimeout("startMove()", 10);
　}

　function stopMove()
　{
　clearTimeout(movingID);
　}
　

　
　

　
　
　
　
　

움직일 수 있어요...

　

　


　
　

　
　

여기서는 주로 setTimeout(함수, 간격)이라는 함수를 사용합니다. :
첫 번째 매개변수 'function'은 타임아웃 후 호출할 함수 이름이고, 두 번째 매개변수 'interval'은 타임아웃 값(마이크로초)입니다.

참고로 이 타이머를 중지하려면 setTimeout() 함수를 호출한 후 반환 값을 저장하고,clearTimeout(id) 함수를 통해 타이머를 취소해야 합니다.