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

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

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

sponsors

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

記事作成:
記事URL:

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