画像ファイルPNGで、アニメーションします。もちろん、jpgでもいいです。2枚の絵を交互に入れ替えてます。
こちらが、サンプルです。
ソース表示してみてください。こんなのが、でます。
<!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>anime_1</title>
<script type="text/javascript">
<!--
flag=true;
cat1=new Image;
cat1.src="anime/cat_1.png";
cat2=new Image;
cat2.src="anime/cat_2.png";
function anime(){
if (flag) {_cat=cat1;} else {_cat=cat2;}
document.neko.src=_cat.src;
flag=!flag;
setTimeout("anime()",500)
}
//-->
</script>
</head>
<body onLoad="anime()">
<p>
<img src="anime/cat_1.png" alt="cat" width="32" height="32" name="neko">
</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アニメその1」とか。
<script type="text/javascript">
<!--
この中にJavaScriptを書きます。
//-->
</script>
将来、language="javascript"でなくtype="text/javascript"になるかもしれませんので、こう書いておきます。
flag=true;
flagという変数を、trueにします。
cat1=new Image;
cat1.src="anime/cat_1.png";
cat2=new Image;
cat2.src="anime/cat_2.png";
画像を、new Imageであらかじめ読みこんでおきます。アニメ処理をするたびに読みこむのもなんですから。
function anime(){
}
anime()という関数を作ります。この中{ }に関数の中身を書きます。
if (flag) {_cat=cat1;} else {_cat=cat2;}
もしも(if)、flagがtrueなら、変数_catに、上で作っておいたcat1を入れます。trueでない(false)場合、else以降の文が実行されますので、_catにcat2が入ります。
ifの代りに?を使ってもいいです。その場合、こんな感じです。
_cat=(flag) ? cat1 : cat2;
document.neko.src=_cat.src;
画像のnameは、nekoです。document.neko.src=で、画像を変えることができます。nameをつけてない場合は、nekoの代りに、images[0]でもいいです。この場合は。if文で、選んでおいた_catに、.srcをつけて、代入します。
flag=!flag;
!で、反転させることができます。trueをfalseに、falseをtrueにします。
setTimeout("anime()",500)
setTimeoutで、anime()を呼び出します。これが、普通の、一定時間ごとに繰り返す処理の仕方です。ミリ秒単位で指定しますので、500は、0.5秒です。
JavaScriptは終り、これからは、HTMLです。
<body onLoad="anime()">
<body>〜</body>内に、メインの文を書きます。
onLoadは、HTMLを読みこんだら、実行するってことです。読みこんだらすぐに実行してほしいので、bodyに入れておきます。onLoad="anime()"で、anime()関数を呼び出します。
<p>〜</p> imgは、インライン要素で、bodyに直接書いてはいけないので、pで囲ってます。pの代りにdivでもいいです。
<img src="anime/cat_1.png" alt="cat" width="32" height="32" name="neko">
imgで、画像を表示します。
src="anime/cat_1.png"で、ファイル名を指定します。必要です。
alt="cat"で、画像が表示されない時に表示される言葉を指定します。IEだと、カーソル(マウス)を合わせると、吹き出しが出ます。必要ですので、入れるようにしましょう。表示したくないときは、alt=""としましょう。
width="32" height="32" で、横、縦のサイズを指定します。指定すると、読み込み中にレイアウトが崩れることがないので、入れたほうがいいでしょう。
name="neko"で、名前をつけます。document.neko.src=というふうに、JavaScriptでコントロールする時に使います。
本当は、もっとMETAとか、ADDRESSとかCSSがほしいです。このサンプルは、IE5.5とNetscape6で動きました。//でコメントを付けておくと分かりやすいかも。
Next : 次のサンプルへ Up : JavaScript-Sampleに戻る Home : ホームに戻る