■ライセンス:MITもしくはGPL
■ブラウザー:Firefox 2.0(Windows)、IE6.0+(Windows)、Firefox 1.5(Mac & Mac OS X )、Safari 2.0(Mac & Mac OS X)
使い方
1)JavaScript宣言定義
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dock.js"></script>
2)画像(gif、jpg、png)の用意
※ファイル名をご注意いただきたい
画像名_x.gif(例:pic01_35.gif)
画像名_X.gif(例:pic01_70.jpg)
xは小サイズ時の画像数
Xは大サイズ時の画像数
gif、jpg、pngどちらでも良い
3)img要素を含めたHTML定義
<div id="Bar">
<a href="#">
<img src="img/alerts_35.gif" alt="画像1" border="0" />
</a>
<a href="#">
<img src="img/desktop_35.gif" alt="画像2" border="0" />
</a>
...
</div>
img要素は必ずa要素に囲まれるようにしてください。
4)javascriptでドック表示
<script type="text/javascript">
var confObject = {
iconMinSide : 35, //小サイズ(推奨:20-50)
iconMaxSide : 70, //大サイズ(推奨:70-140)
distAttDock : 100, //カーサの位置とエフェクト終了位置間の距離
coefAttDock : 2, //(推奨:0.5-2.5)
veloOutDock : 500, //初期状態に戻るまでの時間(マウスがメニューから離れた時間)(推奨:500-2000)
valign: 'bottom' //揃え方('top', 'bottom' or 'middle'など)
}
jQuery(function() {
jQuery("#Bar").addDockEffect(confObject);
});
</script>
デモはこちら