Javascript 및 DHTML 예제 프로그래밍(튜토리얼) (4) 기초 예제 2 - 애니메이션_기본 지식

이전 기사에서는 노드를 동적으로 생성하고 삭제하는 예제에 대해 설명했습니다. 이 기사에서는 setInterval 및 setTimeout을 사용하여 간단한 애니메이션을 만드는 방법에 대해 설명합니다.
구문은 window.setTimeout(fn, 지연), window.setInterval(fn, 지연)입니다.
fn은 함수 이름이거나 실행 문자열일 수 있지만 fn인 경우 실행 가능한 문자열이라는 점에 유의해야 합니다. 예를 들어 window.setInterval("myFunction(obj)",1000)은 예외가 발생할 수 있습니다. 이때 일반적으로 개체 매개 변수를 전달해야 합니다. 이를 해결하는 방법도 권장됩니다. 이 방법을 사용하여 window.setTimeout 및 window.setInterval을 사용하려면:

window.setInterval(function (){
myFunction(obj);},1000)

또 다른 상황은 다음과 같습니다. "클래스"에서 this.myFunction(obj)을 구현하는 방법은 무엇입니까?


function jsclass() {};
jsclass.prototype.init = function (obj) {
var self = this; //이 포인터에 대한 참조 생성
창 .setInterval(function(obj) {
self.myFunction(obj);},1000);
}
jsclass.prototype.myFunction = function(obj) {
//TODO
};

DHTML의 전역 메소드 setInterval 및 setTimeout. 소위 전역은 DHTML에 속하지 않는 DOM 요소의 메소드를 의미합니다. 인터넷에 많은 설명이 있는데 setInterval이라고 합니다. 지정된 함수를 루프로 실행하고 setTimeout은 한 번만 실행됩니다. 예외적으로 윈도우 레벨에 속하는 경우에는 윈도우를 앞에 추가할 수 없다. 즉, window.setInterval을 사용하거나 setInterval을 직접 사용할 수 있다.

모두 cleaverInterval/clearTimeout 메서드에 사용되며 setInterval/setTimeout에서 반환되는 숫자 타이머Id를 반환합니다. 데스크톱 애플리케이션을 수행한 경우 setInterval 및 setTimeout을 스레드를 생성하는 것으로 생각할 수 있으며,timerId는 스레드 ID이고 cleaverInterval/clearTimeout 메서드는 이 스레드를 파괴합니다. 아마도 이 두 가지 방법을 더 잘 이해할 수 있을 것입니다.

(특정 애플리케이션에서는 setTimeout을 선호합니다.)

이 두 메소드의 기능을 알고 있으므로 먼저 간단한 예를 작성해 보겠습니다.

경고 대화 상자가 나타납니다. 1초 후에 올라옵니다.

<script> <BR>window.setTimeout(function () { <BR> Alert("1초 후 시간 초과 예"); <BR>},1000) <BR></script>

1초마다 새로운 DIV 노드를 생성하는 함수
<script> <BR>function IntervalExample() { <BR> var div=document.createElement("div"); innerHTML = "www.never-online.net의 DHTML 및 자바스크립트 프로그래밍 튜토리얼"; <BR> document.body.appendChild(div) <BR>} <BR>window.setInterval(intervalExample,1000); ></script>

실제 애플리케이션에서 setTimeout은 VB의 DoEvents 함수 또는 .net 데스크톱 프로그램의 Application.DoEvents()와 같은 대체 애플리케이션을 가질 수 있습니다. 비동기 처리입니다. DHTML에는 멀티스레딩이 없기 때문에 이 기능은 사용자가 애니메이션이 정지된 상태가 아니라는 느낌을 주거나 코드의 논리에 따라 다른 프로그램이 계속 실행되도록 하기 위해 자주 사용됩니다. 차단하지 않거나 코드 실행 블록을 건너뛰지 않습니다.

예를 들어보세요.

다음 코드는 setTimeout을 추가하지 않습니다. 실행 후 앵커 포인트는 즉시 hash2

<script> <br>window.location.hash="hash1"; <br>window.location.hash="hash2"; < /script> <BR><BR>이 섹션은 setTimeout으로 추가됩니다. 앵커 포인트는 3초 후에 hash1을 가리키고, 3초 후에 hash2를 가리킵니다. = 0; <BR>function DoEvents(fn) { <br> window.setTimeout(fn,doEventsDelay); <br> doEventsDelay =3000 <BR>} <BR>DoEvents(function () { <BR> window.location .hash=" hash1"; <BR> doEventsDelay-=3000; <BR>} <BR>) <BR>DoEvents(function () { <BR> window.location.hash="hash2"; <BR> doEventsDelay -=3000; <BR> } <BR>); <BR></script>

팁을 동적으로 표시하는 동적 메뉴와 같은 좀 더 실용적인 예를 만들어 보겠습니다.

1. 여기서는 setTimeout 메소드에 대해서만 설명합니다. setInterval에 대해서는 데모의 코드를 참조하세요. 또한 한 가지 주의할 점(이 예제에는 아직 해결되지 않은 심각한 문제가 있습니다. 떠나겠습니다. 여기서는 나중에 설명하겠습니다.) 좌표에 관한 문제입니다. 예를 들어, 다음 코드의 SliderShow를 테이블에 넣으면 몇 가지 문제가 발생할 수 있습니다.:D

요소를 가져와 이 요소를 기준으로 표시한 다음 팁 컨테이너를 기반으로 애니메이션을 만드는 것이 아이디어입니다.
사용되는 주요 내용은 상대 요소의 X, Y 좌표입니다. 요소, 좌표 정보 일부 속성 의미는 아래 그림을 참조하세요.

애니메이션 전체의 아이디어는 아래 사진을 참고하세요

댓글 코드:

<title> 슬라이더 쇼 데모 - http://www.never-online.net </title> <meta http-equiv="ImageToolbar" content="no"> <style type="text/css" media="all" title="Default"> * { font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; margin:0; } body { font-size:10pt; text-align:center; } .sliderShowBox { border:1px solid #333; visibility:hidden; position:absolute; background-color:#eee; overflow:hidden; width:250px; text-align:left; } .sliderShowContent { padding:5px; } </style> <h1> </h1> 슬라이더 쇼 데모 <hr> <a href="###" onclick="javascript:effect_sliderShow(this,'sliderShowBox')"> </a>setTimeout 데모 보기를 클릭<div class="sliderShowBox" id="sliderShowBox"> <div class="sliderShowContent"> </div> 슬라이더쇼 DHTML 및 자바스크립트 프로그래밍 튜토리얼 작성자: never-online, never-online.net </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]생각이 많이 드시나요? 위의 예는 중복입니까? 적게 있으면 더 좋지 않을까요? :D, 실제로 위 JS 코드의 거의 절반이 중복되었습니다. 여기서는 최적화하지 않겠습니다. 그러나 위 코드의 중복성을 줄이기 위한 실질적인 작업은 여러분에게 맡기겠습니다.​