[JS]水平・垂直など多彩なデザインが可能なDock風ナビゲーションのスクリプト -jqDock

水平タイプ、垂直タイプなど多彩なデザインが可能なMac OS XのDock風ナビゲーションを実装するスクリプトを紹介します。

下記のキャプチャは水平タイプのもので上から、上揃え、中央揃え、下揃えとなっています。

デモのキャプチャ

jqDock
デモ

[ad#ad-2]

デモでは、HTML5, XHTML 1.0(Transitional, Strict), HTML 4.01(Transitional, Strict)のDoctype有り・無しごとの動作確認ができます。

下記では、その多彩なデザインをいくつか紹介します。

サイトのキャプチャ

左から、左揃え、中央揃え、右揃え

サイトのキャプチャ

左から、Sleep Slide(アイドル時にスライドで隠れる)、Colourise(カラー)、ClickFreeze(クリックで固定)、ラベル表示

[ad#ad-2]

スクリプトのオプションも豊富で、下記にいくつか紹介します。
サイトのデモではこれらのオプションが簡単に試せます。

active(デフォルト: -1)
Dockが初期化された際にアクティブとなるアイテムを指定
align(デフォルト:bottom)
Dockの各アイテムを揃える位置
coefficient(デフォルト:1.5)
イメージの拡大の量
distance(デフォルト:72)
カーソルからの距離
duration(デフォルト:300)
拡大時と収納時の持続時間
fadeIn(デフォルト:0)
フェードの時間
fadeLayer(デフォルト:無し)
フェードする際のレイヤー
flow(デフォルト:false)
相対的なポジションの調整
idle(デフォルト:0)
アイドルタイム
inactivity(デフォルト:0)
マウスが動かなかった際に隠れる時間
labels(デフォルト:false)
ラベルの表示・非表示、表示位置
setLabel(デフォルト:無し)
ラベルの設定
size(デフォルト:48)
イメージの最大値
step(デフォルト:50)
イメージ拡大の時間

sponsors

top of page

©2018 coliss