JavaScriptでMacOS XのDock機能を実現する
2006年12月19日-
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();
}
動作しているデモ
凄くなめらかに動作し、クリックしたときの飛び跳ねるエフェクトまで再現されてますね^^;
素晴らしいです。
関連エントリ
最新のブログ記事(新着順)
- ホバー時にCSSで下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- 過去のエントリ