第68回 「画像を定期的に移動させる」
今回は画像を定期的に移動させてみます。
定期的に画像を移動させるには前回使ったsetIntervalを使います。定期的に実行する関数内で画像の座標値を増やすか減らしていきます。Mathオブジェクトを使ってサインカーブや複雑な計算を行って画像を動かすこともできます。
動かす際には、動かす画像の座標値を保持する変数を用意しておきます。例えば以下のように準備します。
x = 0
y = 0
var x,yのように単純に変数を用意するだけでなく数値を入れているのには理由があります。最初に値＝座標を入れておかないと内容が未定義のためエラーまたは動作不良を起こしてしまうためです。このように最初に値を入れておく処理部分は「初期化」「初期値設定」と呼ばれます。
次に画像を動かすために定期的に呼び出される関数内で
x = x + 1
のように変数に値を加えます。これで座標値が１増える、つまり右側に画像が移動する事になります。次に座標値を
document.getElementById("myIMG").style.left = x
のように指定します。
以下のプログラムは0.1秒ごと画像を右下に移動させます。
<html>
<head>
<title></title>
<style type="text/css"><!--
#myIMG {
position:absolute;
left: 0px;
top: 0px;
}
--></style>
<script language="JavaScript"><!--
x = 0;
y = 0;
function moveImage()
{
x = x + 1;
y = y + 0.5;
document.getElementById("myIMG").style.left = x;
document.getElementById("myIMG").style.top = y;
}
// --></script>
</head>
<body onLoad="setInterval('moveImage()',100)">
<img src="photo1.jpg" id="myIMG">
</body>
</html>
もう少し違った動きをさせたい場合には座標値を計算する部分を変更します。この動きに関しては数学の教科書などを参考にするか、グラフを描いて、それに当てはまる数式を導き出す必要があります。
以下のプログラムは正弦関数（sin：サイン)を利用して画像を上下に揺動させます。
<html>
<head>
<title></title>
<style type="text/css"><!--
#myIMG {
position:absolute;
left: 0px;
top: 100px;
}
--></style>
<script language="JavaScript"><!--
x = 0;
y = 100;
n = 0;
function moveImage()
{
n = n + 0.1;
y = 100 + Math.sin(n) * 30;
document.getElementById("myIMG").style.left = x;
document.getElementById("myIMG").style.top = y;
}
// --></script>
</head>
<body onLoad="setInterval('moveImage()',100)">
<img src="photo1.jpg" id="myIMG">
</body>
</html>
次回は画像をマウスに追従させるプログラムについて説明します。