| ポイント |
<![CDATA[
imgY += n;
n = n + 1;
document.myIMG.style.top = imgY;
if (imgY >= winH) n = -n*e;
]]>
|
| 説 明 |
画像のY座標に加速度を加算し、ウィンドウ最下部の座標を超えたら加速度の方向を反転させます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>画像を画面下でバウンドさせる</title>
<script language="JavaScript"><!--
function moveImg()
{
imgY += n;
n = n + 1;
document.myIMG.style.top = imgY;
if (imgY >= winH) n = -n*e;
}
function set()
{
if (document.all) winH = document.body.clientHeight;
if (!document.all && document.getElementById) winH = window.innerHeight;
winH = winH - document.myIMG.height;
imgY = 0;
n = 1;
e = 0.85;
timerID = setInterval("moveImg()",100);
}
// --></script>
</head>
<body onLoad="set()">
<img src="image.jpg" name="myIMG" style="position:absolute;top:0px;">
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
画像を画面下でバウンドさせる