| 解 説 |
マウスからの距離に応じて画像サイズを変える、MacOSXのドックのような動きにするには画像（アイコン）の座標とマウス座標の距離の差分を求め距離に応じて反比例するようにします。あらかじめ画像にはスタイルシートで座標を指定しておく必要があります。
|
| コード |
<![CDATA[
<html>
<head>
<title>マウスからの距離に応じて画像サイズを変える（MacOS Xのドック）</title>
<script language="JavaScript"><!--
w = 64; // 画像の元サイズ
max = 2; // 最大倍率
Num = 8; // 画像の最大枚数
base= 150 + w; // 基準Y座標
function setSize()
{
dispX = 0; // 表示開始X座標
x = event.x;
for (i=0; i<Num; i++)
{
ix = document.images["Dock"+i].style.pixelLeft;
n = (w * max) / Math.abs(ix - x); // 倍率
if (n > max) n = max;
if (n < 1 ) n = 1;
n = w * n;
document.images["Dock"+i].width = n;
document.images["Dock"+i].style.left = dispX;
h = document.images["Dock"+i].height;
document.images["Dock"+i].style.top = base - h;
dispX = dispX + n;
}
}
// --></script>
</head>
<body onmousemove="setSize()">
<nobr>
<img src="image.jpg" name="Dock0" style="position:absolute;left:0px; top:150px;">
<img src="image.jpg" name="Dock1" style="position:absolute;left:64px; top:150px;">
<img src="image.jpg" name="Dock2" style="position:absolute;left:128px;top:150px;">
<img src="image.jpg" name="Dock3" style="position:absolute;left:192px;top:150px;">
<img src="image.jpg" name="Dock4" style="position:absolute;left:256px;top:150px;">
<img src="image.jpg" name="Dock5" style="position:absolute;left:320px;top:150px;">
<img src="image.jpg" name="Dock6" style="position:absolute;left:384px;top:150px;">
<img src="image.jpg" name="Dock7" style="position:absolute;left:448px;top:150px;">
</nobr>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
マウスからの距離に応じて画像サイズを変える（MacOS Xのドック）