「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

画像でのマウスオーバー時、画像の一部をズームして拡大表示することが出来るjQueryプラグイン「elevatezoom.js」の使用方法をご紹介します。

導入手順

    1. プラグイン「elevatezoom.js」のダウンロード
    2. 必要となるファイル
      • jquery.elevatezoom.js
    3. サンプルソース「HTML」
      画像にidセレクタを指定して、デフォルト時は実際の画像サイズより小さく表示するように設定します。
    4. サンプルソース「jQuery」
    5. 実行サンプル
        画像の中でズーム表示

top_0011.jpg

      • 虫眼鏡のレンズのように表示

top_0011.jpg

      • フェードイン、フェードアウトさせて表示

top_0011.jpg

      • マウスホイールでズームの大きさを変更して表示

top_0011.jpg

      • ズーム表示のサイズを変更して表示

top_0011.jpg

Ads by Google

コメントを残す

メールアドレスが公開されることはありません。