指定範囲内を動き続ける画像(setInterval, pixelLeft, pixelTop)
<html> <head> <title>指定範囲内を動き続ける画像</title> <script language="JavaScript"> <!-- xmin = 0; // 左 動く範囲の設定 ymin = 0; // 上 xmax = 670; // 右 ymax = 360; // 下 x = 1; y = 1; function move(){ // 画像の移動 if(x == 1) { // 右に移動 img1.style.pixelLeft = img1.style.pixelLeft + 5; if(img1.style.pixelLeft >= xmax) { x = 2; } } if(x == 2) { // 左に移動 img1.style.pixelLeft = img1.style.pixelLeft - 5; if(img1.style.pixelLeft <= xmin) { x = 1; } } if(y == 1) { // 下に移動 img1.style.pixelTop = img1.style.pixelTop + 5; if(img1.style.pixelTop >= ymax) { y = 2; } } if(y == 2) { // 上に移動 img1.style.pixelTop = img1.style.pixelTop - 5; if(img1.style.pixelTop <= ymin) { y = 1; } } } function tm(){ // タイマー setInterval("move()",30); } //--> </script> </head> <body onLoad="tm()"> <img src="../../sample/img/img2.gif" ID="img1" STYLE="position:absolute;top:0;left:0"> </body> </html>
〔 実行する 〕