jQuery の jqDock によるドックメニューのカーソル反応距離設定

jQuery の jqDock プラグインで作る Mac OS X 風ドックメニューは、distance オプションを設定することにより、カーソルにメニュー画像が反応する距離を設定できる。
この数値を大きくすると、隣のメニュー画像なども反応する。小さくすると、目的のメニュー画像のみが反応する。さらに、小さくすると、目的のメニュー画像の中心に近づかないと反応しなくなる。初期設定値は、「72」。
jqDock プラグインの入手方法などについては、こちら。

実装例（サンプル）

72（デフォルト）

120

48

24

10

実装例（サンプル）の動作について

72 は、両隣のメニュー画像が反応する。120 は、両隣のメニュー画像と、さらに、その隣も反応する。48 は、隣の左右どちらかのメニュー画像だけが反応する。20 は、目的のメニュー画像だけしか反応しない。10 は、目的のメニュー画像の中心に近づかないと反応しない。
これらは、最小サイズが 48 で、最大サイズが 70 の場合であり、メニュー画像の大きさによって、反応は異なる。

実装例（サンプル）のソースコード

読み込み

jquery.js と jquery.jqDock.js を読み込む。
ファイルへのパスは、それぞれ、アップロードした場所を指定する。

JavaScript

72 の数値の部分が、カーソルにメニュー画像が反応する距離。この数値を、120 や 48 などに変更することで、反応具合を調整できる。

CSS

重ならないように、マージンを入れたが、重なっても構わない場合は、マージンを指定する必要はない。

HTML

画像ファイルへのパスは、それぞれ、アップロードした場所を指定する。