※この記事にはプロモーションが含まれています。

オンカーソルで画像ズームするなら「jQuery image zooming plugin」がおしゃれでいい感じ

オンカーソル(マウスオーバー)で画像をズーム(拡大)できるようにする「jQuery image zooming plugin」を試してみた。アマゾンなどで商品の表示に使われているようなズームに近い効果を可能にするプラグインだ。

オンカーソルで拡大というのは、こんな感じ。最初にサンプルをどうぞ。


「jQuery image zooming plugin」を使うにはまず公式サイトから一式ダウンロードしてくること。

<公式サイト>

[browser-shot url=”http://www.jacklmoore.com/zoom/” width=”300″]

手っ取り早く動かしたければ、ZIP解凍してできたフォルダを丸ごとftpで自サイトに送って、フォルダ内のdemo.htmlにアクセスすればサンプルが見られる。

サンプルを見ると分かるように、このプラグインの動作は4通りから選べる。冒頭で表示したサンプルのようなマウスオーバーで無条件拡大という動作が1つだが、それ以外に、

◇マウスの左ボタンでホールドしている間だけ拡大・移動

◇マウスの左ボタンをクリックすると拡大・移動モード、もう一度クリックで解除

◇マウスクリックした付近を拡大し、もう一度クリックすると解除

というパターンがあるので、用途によって効果を使い分けるといいだろう。

※この記事にはプロモーションが含まれています。[PR]

[この記事を書いた人] おき兄
デジタル世界で遊び続けて十余年。ガジェット大好き。組み立てたり壊したりするのも好き。昔はマザーボードに美しさを感じたりしていました。最近はVR/MRに傾倒。Xアカウント:@Okiniでも情報共有。

スポンサーリンク

シェアする

フォローする

スポンサーリンク