29分でできる！ あのサイトの“技”を盗め ― 第2回
ステーキ丼をJavaScriptで美味しく拡大
2008年09月06日 04時00分更新
IEでの表示不具合を解消する
非常に手軽なTJPzoomライブラリですが、冒頭に説明したように、HTMLタグの組み合わせや状況によっては、IEで不具合が発生してしまいます。具体的には、ズーム部分がおかしな位置に表示されてしまうのです。
 |
|---|
| IEでの表示不具合。本来重なるはずのマウスカーソルの位置と拡大画像の位置がずれてしまっています |
原因は不明ですが、ページを1ピクセルだけ下にスクロールさせることで一応正しく機能するようになります。今回のところはこれで切り抜けましょう。ページを1ピクセル下にスクロールさせるには、以下のスクリプトを追加します。
window.scrollTo(0,1);
今回の作例では、TJPzoomライブラリが読み込まれた後に<script>タグを使って以下のようにしておきましょう。
<script type="text/javascript"><!--
window.scrollTo(0,1);
// --></script></code>
以上で完成です。連載タイトルの「29分」どころか、10分足らずで完成してしまったことと思います（完成した作例）。
 |
|---|
| 最終的に完成した作例。マウスカーソルにあわせて画像が拡大されます |
今回は簡単に実装できるTJPzoomライブラリを使いましたが、類似の機能を持つライブラリの中には、「Loupeライブラリ」のように、虫眼鏡などのビジュアルで表示するものもあります。興味のある方は、こちらもぜひ挑戦してみましょう。
（作例デザイン：wataru）
（作例写真：写真素材 足成）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
- 実践!Ajaxフレームワーク jQuery
- 古籏一浩 著、毎日コミュニケーションズ刊
- 改訂第4版 JavaScript ポケットリファレンス
- 古籏一浩著、技術評論社刊
- CSS&JavaScript表現アイデア帖
- エム・ディー・エヌ刊
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ＋jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo！の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド！ページ切換法
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
