<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{ font-size: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 src="/static/imghw/default1.png" data-src="img/img_01.jpg" class="lazy" alt="JavaScript イメージ アニメーションに関する小さなデモ_JavaScript ヒント" > の IDアニメーション化されるタグ <br>* fps: 1 秒あたりに表示するフレーム数 <br>* FrameURLs: URL の配列、アニメーションのフレームごとに 1 つ <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 src="/static/imghw/default1.png" data-src="img/img_01.jpg" class="lazy" alt="JavaScript イメージ アニメーションに関する小さなデモ_JavaScript ヒント" >要素、ID で検索 <br>this.loaded = false; // すべてのフレームが読み込まれたかどうか <br>this.loadedFrames = 0; // ロードされたフレーム数 <br>this.startOnLoad = false; // ロードが完了したらアニメーションを開始しますか? <br>this.frameNumber = -1; // 現在表示されているフレーム <br>this.timer = null; // setInterval() の戻り値 <br><br>// Frames[] 配列を初期化し、画像をプリロードします <br>for (var i = 0; i <frameurls.length i> 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>関数 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 anime = 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 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></frameurls.length> </div>
