マウスを追いかける画像(onMousemove)
<html> <head> <title>マウスを追いかける画像</title> <script language="JavaScript"> <!-- flag = 0; function move(){ // マウスの位置 x = event.x + 10; y = event.y - 30; moveimg(); } function moveimg(){ // 画像を移動 img1.style.pixelLeft = x + (img1.style.pixelLeft - x) / 100 * 90; img1.style.pixelTop = y + (img1.style.pixelTop - y) / 100 * 90; img2.style.pixelLeft = x + (img2.style.pixelLeft - x) / 100 * 93; img2.style.pixelTop = y + (img2.style.pixelTop - y) / 100 * 93; img3.style.pixelLeft = x + (img3.style.pixelLeft - x) / 100 * 96; img3.style.pixelTop = y + (img3.style.pixelTop - y) / 100 * 96; img4.style.pixelLeft = x + (img4.style.pixelLeft - x) / 100 * 98; img4.style.pixelTop = y + (img4.style.pixelTop - y) / 100 * 98; img5.style.pixelLeft = x + (img5.style.pixelLeft - x) / 100 * 99; img5.style.pixelTop = y + (img5.style.pixelTop - y) / 100 * 99; if(flag == 0) { setInterval("moveimg()",50); flag = 1; } } //--> </script> </head> <body onMousemove="move()"> <img src="../../sample/img/img2.gif" ID="img5" STYLE="position:absolute;top:0;left:0"> <img src="../../sample/img/img2.gif" ID="img4" STYLE="position:absolute;top:0;left:0"> <img src="../../sample/img/img2.gif" ID="img3" STYLE="position:absolute;top:0;left:0"> <img src="../../sample/img/img2.gif" ID="img2" STYLE="position:absolute;top:0;left:0"> <img src="../../sample/img/img2.gif" ID="img1" STYLE="position:absolute;top:0;left:0"> </body> </html>
〔 実行する 〕