| 解 説 |
画像の上にマウスが乗ったら画像が跳ねるようにするにはonmouseoverで跳ねる画像オブジェクトデータを関数に渡します。関数側では画像オブジェクトのスタイルシートのY座標のプロパティを変化させますが、跳ねるように見せるため三角関数を使って移動量（跳ねる量）を求めます。onmouseoutによって画像からマウスが離れたら最初のY座標に設定しなおします。
スクリプト中で「y = (iObj = srcObj.style).pixelTop;」という記述がありますが、これは「iObj = srcObj.style;」「y = iObj.pixelTop;」と同じです。
|
| コード |
<![CDATA[
<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! |
画像の上にマウスが乗ったら画像が跳ねるようにする