画像ファイルPNGで、アニメーションします。もちろん、jpgでもいいです。今度は、3枚の絵を順番に入れ替えてます。また、ボタンで、動かしたり止めたりしてます。
こちらが、サンプルです。
ソース表示すると、こうでます。(これ以外は、広告用なので、無視してください)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<META http-equiv="Content-Script-Type" content="javascript">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>JavaScriptの実験・サンプル・解説・PNGアニメその2</title>
<script type="text/javascript">
<!--
flag=0;
sw=false;
box=new Array
box[0]=new Image;
box[0].src="anime/box_1.png";
box[1]=new Image;
box[1].src="anime/box_2.png";
box[2]=new Image;
box[2].src="anime/box_3.png";
function anime(){
document.sikaku.src=box[flag].src;
flag++;
if (flag==3) flag=0;
key=setTimeout("anime()",500);
}
function change(){
if (sw) {clearTimeout(key);}
else {anime();}
sw=!sw;
}
//-->
</script>
</head>
<body>
<p>
<img src="anime/box_3.png" alt="square" width="32" height="32" name="sikaku">
<button onClick="change()">push</button>
</p>
</body>
</html>
いちおう、全部解説します。前回と同じとこは、コピーしてるだけなので、見た人は飛ばしていいです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
HTML4.01 Strictという文書タイプを使います、と宣言してます。普通はこれを使いましょう。
<html lang="ja">
html内に、HTMLを書くようにします。lang="ja"は、日本語を使いますっていうことです。
<head>〜</head>
この中に、情報、定義しておくものなどを書きます。
<META http-equiv="Content-Script-Type" content="javascript">
JavaScriptを使いますってことを言っておきます。
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
標準的なシフトJISで書きますってことです。この宣言の前には日本語(漢字)は使わないようにしましょう。
<title>anime_1</title>
<title>〜</title>の中にタイトルを入れます。タイトルは必ず入れるようにしましょう。「JavaScriptの実験・サンプル・解説・PNGアニメその2」となってます。もっと分かりやすくてもいいですね。
<script type="text/javascript">
<!--
この中にJavaScriptを書きます。
//-->
</script>
将来、language="javascript"でなくtype="text/javascript"になるかもしれませんので、こう書いておきます。
flag=0;
変数flagを0にしておきます。これを、0〜2にして、配列変数[ ]に入れて楽します。
sw=false;
変数swをfalseにしておきます。これは、animeが動いてるか、動いてないかのチェックに使います。
box=new Array
配列変数boxを作ります。
box[0]=new Image;
box[0].src="anime/box_1.png";
box[1]=new Image;
box[1].src="anime/box_2.png";
box[2]=new Image;
box[2].src="anime/box_3.png";
画像を、new Imageであらかじめ読みこんでおいて、srcで、ファイル名を指定します。配列変数box[0〜2]の中に入れてます。アニメの数を増やしたいときは、3〜の数字を使って入れます。
function anime(){
}
anime()という関数を作ります。この中{ }に関数の中身を書きます。
document.sikaku.src=box[flag].src;
imgの名前(name)、sikakuのを、box[0〜2]のに替えてます。サンプルでは、1つしか画像は使われてないので、sikakuの代りにimages[0]でいいと思いますが、広告が入るときは、そっちに0が割り振られるかも知れないので、nameかidで指定した方がいいでしょう。
flag++;
flagに+1してます。flag=flag+1;です。
if (flag==3) flag=0;
flagが3になったら、0にします。アニメの数を変えたい時は、ここも変えます。
いちいち変えるのが面倒なら、lengthを使って、(flag==box.length)でもいいです。配列変数.lengthで、配列がいくつ入ってるか分かります。0〜2までの3つ入ってるから、3になります。
上の2行の flag++; if (flag==3) flag=0; を計算式のみで書くと、
flag=(flag+1)%3;となります。flagに1足して、%3で、3で割った余りをflagに入れてます。3で割ると、答えは、0〜2になります。
key=setTimeout("anime()",500);
setTimeoutで、anime()を呼び出します。これが、普通の、一定時間ごとに繰り返す処理の仕方です。ミリ秒単位で指定しますので、500は、0.5秒です。
setTimeoutに変数key(タイマーID)を設定してますので、clearTimeoutで、止めることができます。
function change(){
}
関数changeを作ります。ボタンを押したとき、animeの実行、停止を司ります。
if (sw) {clearTimeout(key);}
else {anime();}
{ }の中は、一つだけなので、{ }がなくても動きます。
始めは、swはfalseです。swが、trueなら、animeが動いてるということなので、clearTimeout(key);で、animeを止めます。
elseで、swがfalseなら(始めの設定)、anime()で、実行させます。
sw=!sw;
!で、反転させることができます。trueをfalseに、falseをtrueにします。
始めは、falseで、ボタンを押してここに来たとき、anime()を動かし、!swで反転し、trueになります。trueだと、animeが動いてるということです。
JavaScriptは終り、これからは、HTMLです。
<body>
<body>〜</body>内に、メインの文を書きます。
<p>〜</p>
imgとbuttonは、インライン要素で、bodyに直接書いてはいけないので、pで囲ってます。pの代りにdivでもいいです。
<img src="anime/box_3.png" alt="square" width="32" height="32" name="sikaku">
imgで、画像を表示します。
src="anime/box_3.png"で、ファイル名を指定します。必要です。
alt="square"で、画像が表示されない時に表示される言葉を指定します。IEだと、カーソル(マウス)を合わせると、吹き出しが出ます。必要ですので、入れるようにしましょう。表示したくないときは、alt=""としましょう。
width="32" height="32" で、横、縦のサイズを指定します。指定すると、読み込み中にレイアウトが崩れることがないので、入れたほうがいいでしょう。
name="sikaku"で、名前をつけます。document.sikaku.src=というふうに、JavaScriptでコントロールする時に使います。
<button onClick="change()">push</button>
<button>〜</button>で、ボタンを作ります。この中のものがボタンになります。ここでは、pushという文字が入ってます。
onClickで、マウスをクリックしたときに、change()が実行されます。
本当は、もっとMETAとか、ADDRESSとかCSSがほしいです。このサンプルは、IE5.5とNetscape6で動きました。//でコメントを付けておくと分かりやすいかも。
Next : 次のサンプルへ Rev : 前のサンプルへ Up : JavaScript-Sampleに戻る Home : ホームに戻る