| ポイント |
<![CDATA[
imgX += dx;
imgY += dy;
document.myIMG.style.left= imgX;
document.myIMG.style.top = imgY;
if ((imgX < 1) || (imgX > winW)) dx = -dx;
if ((imgY < 1) || (imgY > winH)) dy = -dy;
]]>
|
| 説 明 |
ウィンドウ内で反射運動させるにはXY座標に、それぞれ移動量を加算していきます。加算後の座標がウィンドウの上下左右の端を超えたら移動量の符号を反転させます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>画像を画面内で反射運動させる</title>
<script language="JavaScript"><!--
function moveImg()
{
imgX += dx;
imgY += dy;
document.myIMG.style.left= imgX;
document.myIMG.style.top = imgY;
if ((imgX < 1) || (imgX > winW)) dx = -dx;
if ((imgY < 1) || (imgY > winH)) dy = -dy;
}
function set()
{
if (document.all)
{
winW = document.body.clientWidth;
winH = document.body.clientHeight;
}
if (!document.all && document.getElementById)
{
winW = window.innerWidth;
winH = window.innerHeight;
}
winW = winW - document.myIMG.width;
winH = winH - document.myIMG.height;
imgX = imgY = 0;
dx = dy = 8;
timerID = setInterval("moveImg()",100);
}
// --></script>
</head>
<body onLoad="set()">
<img src="image.jpg" name="myIMG" style="position:absolute;top:0px;">
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
画像を画面内で反射運動させる