| ポイント |
<![CDATA[
x = new Array( 0, 1, 0,-1, 0, 0, 0, 1,-1,0,0,0,0,0,0,0,0,0,0,0);
y = new Array( 2, -2,-3, 4,-1,-2, 1, 2,-1,0,0,0,0,0,0,0,0,0,0,0);
if (count >= x.length) count = 0;
setTimeout("purupuruImage()",100);
]]>
|
| 説 明 |
画像を揺らすには、あらかじめ揺らす大きさを配列に入れておきます。配列に格納する数値の合計が0になるようにしないと、画像が少しずつずれて移動してしまいます。画像を現在の位置から移動させるにはスタイルシートのleft、topプロパティに座標を入れます。あとは、setTimeout()かsetInterval()を使い一定時間ごと処理を繰り返せば画像が揺れるようになります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>画像を揺らす</title>
<script Language="JavaScript"><!--
x = new Array( 0, 1, 0,-1, 0, 0, 0, 1,-1,0,0,0,0,0,0,0,0,0,0,0);
y = new Array( 2, -2,-3, 4,-1,-2, 1, 2,-1,0,0,0,0,0,0,0,0,0,0,0);
count = 0;
function purupuruImage()
{
document.all["myIMG"].style.left = x[count];
document.all["myIMG"].style.top = y[count];
count++;
if (count >= x.length) count = 0;
setTimeout("purupuruImage()",100);
}
// --></script>
</head>
<body onLoad="purupuruImage()">
<img src="image.jpg" name="myIMG" style="position:absolute">
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
画像を揺らす