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

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

sponsors

使用方法

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の場合 */

sponsors

Javascriptサンプルページ一覧
skuare.net

サンプル

右上の画像にマウスをのせると動きます。
ここにはコンテンツが入れます。
下のボタンをクリックすると回ります。
<input type="button" value="時計回り" onClick="CornerDock.RotateClockWise();">
<input type="button" value="反時計回り" onClick="CornerDock.RotateAntiClockWise();">