skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

Dockメニューを実現するjavascript「iconDock」

｜ ｜ ｜ ｜ ｜ ｜ ｜

Macで採用されている「Dock」
一般的にはFisheyeと呼んでいたりしますが、マウスをのせると大きくなるメニューみたいなものです。
iconDockがjQueryベースで公開しています。

使用方法
iconDockからjquery.dock.jsを、jQueryからjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.dock.js" type="text/javascript"></script>
<script type="text/javascript">
var Dock = {
iconMinSide : 35, //最小サイズ
iconMaxSide : 100, //最大サイズ
distAttDock : 100, //縮小する距離
coefAttDock : 2, //縮小率（推奨：0.5-2.5）
veloOutDock : 500, //リスタートの早さ（推奨：500-2000）
valign: 'middle' //メニューのalign（top、bottom、middle）
}
jQuery(function() {
jQuery("#id名").addDockEffect(Dock);
});
</script>

次にHTMLを以下のように書きます。
<div id="id名">
<a href="リンク先URI" name="NAME" title="TITLE"><img src="画像URI_N（最小サイズ）.jpg（or gif, png）" alt="ALT" border="0"></a>
<!-- 上記を使用する画像分 -->
</div>
画像のところで“画像URI_N（最小サイズ）”としたのには訳があります。
最小サイズの画像と最大サイズの画像をその数値に合わせて作成する必要があります。
　例）最小サイズ35px、最大サイズ100pxの場合は、image_35.jpgとimage_100.jpgの2種類
Dockメニューを実現するjavascript「iconDock」サンプル

記事作成：2007年09月09日

前の記事：jQueryベースの日付選択javascript「jQueryDatePicker」
次の記事：動画も対象のLightbox系javascript「Mediabox」