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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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