bl6.jpホーム買いものお出かけ雑記bl6.jp備忘録を綴るブログmenuホームJavaScriptマウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」JavaScript2016.07.27マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」ZooMoveは、マウスオーバーで指定された画像やエリアをズームすることができるjQueryプラグインです。これまでも、このような挙動を実装するプラグインは数多く紹介されてきましたが、マウスクリックにより発生するものでした。ところが、ZooMoveを使用すれば、マウスオーバーするだけで同じ挙動を発生させることができます。カーソルを動かせば、見たいポイントを移動させることも可能です。最近では、オンラインショップの商品画像ページで多く見られる表現ですね。それでは、詳しく紹介してみたいと思います。ZooMove実際のZooMoveのデモは以下になります。デモZooMoveは「画像全体の拡大よりも、画像の一部を拡大で見たい場合」に使用すると効果を実感できると思います。ZooMoveを使用すれば、一人ひとりの表情まで確認ができて、思い出の一枚がより鮮明によみがえりそうですね。表示領域を変えずに確認したいところのみが拡大されます。画像全体の拡大によって、ページ内でほかのコンテンツが隠れてしまう心配がありません。使い方ですが、デモページに丁寧に記載されています。class」で画像データをマークアップし、さらにjsでその画像の拡大に関する詳細を指定するというシンプルな流れとなります。具体的な画像の拡大は以下の3パターンが紹介されていました。マウスオーバーした部分の150%拡大(デフォルト値)マウスオーバーした部分の300%拡大マウスオーバーした画像の全体を拡大させるものデフォルトの150%は少しもの足りなさを感じたので、通常なら200%くらいがいいかもしれません。その他のオプションには、マウスの移動とともに画像も移動させるかどうか(デフォルトはtrue)、カーソルについてカーソルポインタまたはデフォルトを使用するか(デフォルトはfalse)などの指定が可能です。9+に対応しているとのことですが、最近話題のVivaldiで確認したところ、こちらも対応していました。ECサイトなどの運営をされている方は、ぜひZooMoveを活用されてみてはいかがでしょうか。ZooMoveJavaScriptエレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」前のページテキスト入力のマスク(入力補助)を作成する「jquery.inputmask」次のページ検索:最近の記事2023.05.26MySQLのパスワードが原因だったWordPressのダッシュボードを開くたびに「PHPが古いからバージョンアップ...2023.05.2510時開店のカフェもなかなか使い勝手がいいオールドデリーに行きたくて少し早めに銀座へ到着したのはいいものの、いや少しではな...2023.05.23なぜか2枚目のナンが運ばれてくる(笑)ひさしぶりに銀座のオールドデリーへ行ってきた。いつのまにか移転したらしくメルサか...2023.05.22実るほどこうべをたれる、いや最初からこうべは真下か...スタバを終えて歯医者までまだ時間があったから公園まで散歩することにした。