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] Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif)




