JavaScriptで部分ズーム処理を実装 (TJPzoom)
2007年5月21日(月) 09:10
写真をズームレンズを通してみたような効果を再現するJavaScriptがTJPzoom。新たなバージョンがリリースされ、表示速度や対応ブラウザなど充実してきている。ナビゲーション操作も新しくなりマウスのみで拡大領域のサイズ変更と、拡大率の変更が可能になった。
写真の上にマウスを乗せるだけで、部分的に拡大表示をしてくれる。クリック+移動でナビゲーションの状態を変更する。上:拡大 下:縮小 左:領域縮小 右:領域拡大
ダウンロードファイルにはチュートリアルなど関連するドキュメントが含まれている。導入は非常に簡単に行うことができるので、カスタマイズする際に参考にすると良い。
利用する場面を想定しにくいインターフェースだが、ブログなどで写真を公開するときに使ってみると面白いかもしれない。また、ある程度高解像度の写真のほうがズームした際にもきれいに表示できる。
関連する記事
- マウス操作で写真にズームするギャラリーswf(PostcardViewer)
- CSSとCanvasで描写するWeb用のUIフレームワーク(Mocha UI)
- 透明感のあるデザインをJavaScriptで実装する(glassbox.js)
- MP4、FLVなど再生するFlashプレーヤーswf (JW FLV MEDIA PLAYER)
- FlashやFLV、MediaPlayerに対応したスライドショーJavaScript(shadowbox)
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)

