rainingjQueryで画像にマウスを合わせた時、虫眼鏡のように画像の一部を拡大して表示したい場合があります。jQueryのプラグイン「loupe」を使用すれば簡単に設定することが可能です。ファイルがとても軽くて、設定の仕方も簡単なので楽に実装することができます。虫眼鏡(ルーペ)のように表示させる方法をメモします。下記URLよりダウンロードして使用します。「jquery.loupe.js」をダウンロードし下記のように設定します。「jQuery」とダウンロードした「jquery.loupe.js」を読み込みます。src="jquery.loupe.js"></script>クラスを「zoom」で指定した画像に対して、ルーペ(loupe)を使用するように設定します。ルーペの幅、高さを指定しています。});});</script>【CSS】マウスをあわせた時の虫眼鏡のスタイルを記述します。#000;}</style>【HTML】imgタグに「class=”zoom”」を記述しています。実際のサイズより小さいサイズで表示するように幅を指定しています。/>aタグで指定する場合は下記のように記述します。/></a>大きい画像と小さい画像を用意して、imgタグに標準で表示する画像を設定し、aタグに拡大する画像を設定することも可能です。別々の画像を指定することも可能です。上記の設定が完了後、設定した画像の上にマウスを持っていきます。マウスを画像にあてると、虫眼鏡のように画像が拡大して表示されます。簡単に設置することができるし、ショッピングサイトなど色々な場面で使用できそうなのでオススメです。コメントをキャンセルメールアドレスが公開されることはありません。