I thought it might be a good idea to document the development of one of our components from a user-interface perspective. We’re in the process of developing a host of new components now, which should be ready for release early this spring. One of these is a Fisheye Menu.

JavaScriptでMacOS XのDock機能を実現する。
Dock機能というのは、次の画像のようにカーソルを合わせると画像を拡大させるアレのことです。



コードは次のようにシンプルで、実装も容易な感じですね。

function runLoad()
{
 myFishEye = new ntbFishEye('myFishEye3', 200, 'down', 'RIGHT',  50, 'fishcontainer');
 myFishEye.addMenuItem("file_new.png", "New File");
 myFishEye.addMenuItem("file_edit.png", "Edit File");
 myFishEye.addMenuItem("file_explore.png", "Search File");
 myFishEye.addMenuItem("file_export.png", "Export File");
 myFishEye.addMenuItem("file_del.png", "Delete File");
 myFishEye.addMenuItem("file_attention.png", "Flag File");
 myFishEye.addMenuItem("file.png", "New Sheet");
 myFishEye.addMenuItem("cut.png", "Cut");
 myFishEye.addMenuItem("info.png", "About");
 myFishEye.render();
}

動作しているデモ

• Fisheye Demo 1
• Fisheye Demo 2

凄くなめらかに動作し、クリックしたときの飛び跳ねるエフェクトまで再現されてますね^^;
素晴らしいです。

関連エントリ

• CSSなタブインタフェースを簡単に作成できる「CSS Tab Designer」
• リサイズ可能なブロック要素をページに作る為のJavaScriptコンポーネント