画像の上にマウスが乗ったら画像が跳ねるようにする

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows - × ×
Macintosh - - × ×
UNIX - - - - - × ×

解  説  画像の上にマウスが乗ったら画像が跳ねるようにするにはonmouseoverで跳ねる画像オブジェクトデータを関数に渡します。関数側では画像オブジェクトのスタイルシートのY座標のプロパティを変化させますが、跳ねるように見せるため三角関数を使って移動量(跳ねる量)を求めます。onmouseoutによって画像からマウスが離れたら最初のY座標に設定しなおします。  スクリプト中で「y = (iObj = srcObj.style).pixelTop;」という記述がありますが、これは「iObj = srcObj.style;」「y = iObj.pixelTop;」と同じです。
コード <html> <head> <title>画像の上にマウスが乗ったら画像が跳ねるようにする</title> <script language="JavaScript"><!-- iObj = null; function jumpIMG() { if (!iObj) return; iObj.top = y - Math.abs(Math.sin(count += 0.1)) * 20; } function setJump(srcObj) { if (iObj) clearJump(); y = (iObj = srcObj.style).pixelTop; count = 0; } function clearJump() { iObj.top = y; iObj = null; } // --></script> </head> <body onLoad="setInterval('jumpIMG()',20)"> <img src="image.jpg" style="position:absolute;left:0px; top:150px;" onmouseover="setJump(this)" onmouseout="clearJump()"> <img src="image.jpg" style="position:absolute;left:64px; top:150px;" onmouseover="setJump(this)" onmouseout="clearJump()"> <img src="image.jpg" style="position:absolute;left:128px;top:150px;" onmouseover="setJump(this)" onmouseout="clearJump()"> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!