角を回るDockを実現するjavascript「Corner Dock Navigation」

最近、アイコンをズームするMacのDock（通称：Fisheye）を実現するjavascriptが増えてきました。
今回紹介するのはひと味違った、角を回りながらズームするDockです。
Corner Dock Navigationで公開されていますが、便利なのかジャマなのか不明です。

使用方法
CornerDock.jsをダウンロードし、headに埋め込みます。
<script type="text/javascript" src="http://yourdomain/CornerDock.js"></script>
次にHTMLで以下のように記述します。
<div id="page">
<div id="CornerDockDiv">
<a id="0" href=""><img src="画像"></a>
<a id="1" href=""><img src="画像"></a>
<a id="2" href=""><img src="画像"></a>
<a id="3" href=""><img src="画像"></a>
<!-- 以下画像分 -->
</div>
<script type="text/javascript">
window.CornerDock = new JSCornerDock('CornerDockDiv',300,600); //id名,縦,横幅の順
</script>
<div id="content">
コンテンツ
</div>
</div>
さらにCSSでも指定が必要です。
#page {margin:0;width: 600px; min-height:300px}
#page #content {margin-top: -300px}
/* 横600、縦300の場合 */
角を回るDockを実現するjavascript「Corner Dock Navigation」サンプル

2007年10月05日

前の記事：スライドショーを作成するjavascript「Slideshow」
次の記事：faviconを表示するjavascript「Hyperlink Cues with Favicons」

関連記事

• [mootools]iFishEye
• [mootools]Fisheye
• MacライクなDockメニューを作成するjavascript「PBB Dock」
• prototypeでFisheyeメニューを作成するjavascript「Fisheye」
• MacのDockライクなメニューを手軽に作成するjavascript「Fisheye Menu」

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」