<div class="codetitle"> <span><a style="CURSOR: pointer" data="32700" class="copybut" id="copybut32700" onclick="doCopy('code32700')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code32700"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html xmlns="http://www.w3.org/1999/xhtml" > <br><머리> <br><title>그림의 형상</title> <br><style type="text/css"> <br>.de{ 글꼴 크기:30px; 텍스트 장식:없음; 글꼴 계열:微软雅黑; color:#ccc;} <br>.de:hover{ color:#933;} <br></style> <br><script type="text/javascript"> <br>/**<br>* ImageLoop.js: 이미지 애니메이션을 수행하기 위한 ImageLoop 클래스 <br>* <br>* 생성자 인수: <br>* imageId: <img> 애니메이션화할 태그 <br>* fps: 초당 표시할 프레임 수 <br>* frameURLs: URL 배열, 애니메이션의 각 프레임에 대해 하나씩 <br>* <br>* 공용 메소드: <br>* start(): 애니메이션 시작(그러나 모든 프레임이 먼저 로드될 때까지 기다림) <br>* stop(): 애니메이션 중지 <br>* <br>* 공용 속성: <br>* 로드됨: 모두 true인 경우 애니메이션 프레임이 로드되었습니다. <br>* 그렇지 않으면 false <br>*/ <br>function ImageLoop(imageId, fps, frameURLs) { <br>// 이미지 ID를 기억하세요. 문서가 로드되기 전에 이 생성자 <br>//가 호출될 수 있으므로 아직 검색하지 마세요. <br>this.imageId = imageId; <br>// 애니메이션 프레임 간 대기 시간 계산 <br>this.frameInterval = 1000 / fps; <br>// 각 프레임에 대한 Image 객체를 보관하기 위한 배열 <br>this.frames = new Array(frameURLs.length); <br><br>this.image = null; // <img> 요소, ID로 조회 <br>this.loaded = false; // 모든 프레임이 로드되었는지 여부 <br>this.loadedFrames = 0; // 로드된 프레임 수 <br>this.startOnLoad = false; // 로딩이 완료되면 애니메이션을 시작하시겠습니까? <br>this.frameNumber = -1; // 현재 표시되는 프레임 <br>this.timer = null; // setInterval()의 반환 값 <br><br>// 프레임[] 배열을 초기화하고 이미지를 미리 로드합니다. <br>for (var i = 0; i <frameURLs.length; i ) { <BR> this.frames[i] = 새 이미지(); // 이미지 객체 생성 <BR>// 프레임이 로드되는 시기를 알 수 있도록 이벤트 핸들러를 등록합니다. <BR>this.frames[i].onload = countLoadedFrames; // 나중에 정의 <BR>this.frames[i].src = frameURLs[i]; // 프레임 이미지 미리 로드 <BR>} <br><br>// 이 중첩 함수는 로드가 완료된 프레임 수를 <BR>// 프레임 수를 계산하는 이벤트 핸들러입니다. 모두 로드되면 <BR>// 플래그를 설정하고 요청된 경우 애니메이션을 시작합니다. <BR>var 루프 = this; <BR>function countLoadedFrames() { <BR>loop.loadedFrames ; <BR>if (loop.loadedFrames == loop.frames.length) { <BR>loop.loaded = true; <BR>if (loop.startOnLoad) loop.start(); <BR>} <BR>} <br><br>// 여기서는 <BR>// 애니메이션의 다음 프레임을 표시하는 함수를 정의합니다. <BR>// setInterval()은 메소드가 아닌 함수만 호출할 수 있으므로 이 함수는 일반 인스턴스 메소드가 될 수 없습니다. 그래서 우리는 <BR>// ImageLoop 객체에 대한 참조를 포함하는 클로저를 만듭니다 <BR>this._displayNextFrame = function () { <BR>// 먼저 프레임 번호를 증가시킵니다. 모듈로 연산자(%)는 <BR>// 마지막 프레임부터 첫 번째 프레임까지 반복한다는 의미입니다. <BR>loop.frameNumber = (loop.frameNumber 1) % loop.frames.length; <BR>// 이미지의 src 속성을 새 프레임의 URL로 업데이트합니다. <BR>loop.image.src = loop.frames[loop.frameNumber].src; <BR>}; <BR>} <br><br>/**<BR>* 이 메소드는 ImageLoop 애니메이션을 시작합니다. 프레임 이미지가 <BR>* 로드가 완료되지 않은 경우 대신 <BR>* 로드가 완료되면 애니메이션이 자동으로 시작되도록 플래그를 설정합니다<BR>*/ <BR>ImageLoop.prototype.start = function () { <BR>if (this.timer != null) return; // 이미 시작됨 <BR>// 로딩이 완료되지 않은 경우 <BR>if (!this.loaded) this.startOnLoad = true; <BR>else { <BR>// 아직 ID로 이미지를 조회하지 않았다면 지금 검색하세요. <BR>if (!this.image) this.image = document.getElementById(this.imageId); <BR>// 첫 번째 프레임을 즉시 표시 <BR>this._displayNextFrame(); <BR>// 그리고 후속 프레임을 표시하도록 타이머를 설정합니다. <BR>this.timer = setInterval(this._displayNextFrame, this.frameInterval); <BR>} <BR>}; <br><br>/**ImageLoop 애니메이션 중지*/ <BR>ImageLoop.prototype.stop = function () { <BR>if (this.timer)clearInterval(this.timer); <BR>this.timer = null; <BR>}; <br><br></script> <br><script type="text/javascript"> <br>function de() { <br>var animation = new ImageLoop("loop", 1, ["img/img_01.jpg", "img/img_02.jpg",]); <br>var sta = document.getElementById("sta"); <br>var stp = document.getElementById("stp"); <br>sta.onclick = function() { <br>animation.start(); <br>} <br>stp.onclick = function () { <br>animation.stop(); <br>} <br>} <br>window.onload = function() { <br>de(); <br>}<br></script> <br></head> <br><본문> <br><img src="img/img_01.jpg" id="loop" alt="" title="" /> <br><a href="#" class="de" id="sta">시작</a> <br><a href="#" class="de" id="stp">중지</a> <br></body> <br></html> <br> </div>
