画像を画面下でバウンドさせる


動作ブラウザ 【 IE:4.0  NN:6.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × - × × × × - × -
Macintosh × - × × × × - - ×
UNIX - - - - - × × × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント imgY += n; n = n + 1; document.myIMG.style.top = imgY; if (imgY >= winH) n = -n*e;
説  明 画像のY座標に加速度を加算し、ウィンドウ最下部の座標を超えたら加速度の方向を反転させます。
サンプル <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!

写真素材 PIXTA