ホバーに画像をズームするZooMove jQueryプラグイン
eコマースサイトを閲覧したことがあれば、 画像ズーム効果. 製品の写真にカーソルを合わせると、画像のその部分が より見やすい.
の ZooMoveプラグイン に最適な方法です この効果を再現する あなたのサイトに。それは jQueryを搭載, そのため、多くのコードを使わなくてもすぐに起動して実行できます。.
ZooMoveは完全にフリーでオープンソースです。 GitHubで 好奇心旺盛な開発者のために。それはを通してインストールすることができます 午後, バウワー, 糸, またはから直接ダウンロード CDNJS.
ZooMove画像を設定するには、 3つの特定のファイル あなたのページヘッダに：
- jQuery
- ZooMove CSS
- ZooMove JS
両方のZooMoveファイル 縮小することができます もっと速いページロードが欲しいなら。簡単な場合は、CSSファイルをメインのスタイルシートにまとめることもできます。.
本当の魔法はすべてHTMLで起こります。 HTML5を設定 data- *属性 さまざまな効果のために.
これにより、あなたは 独自のカスタムズーム効果 4つの異なるパラメータに基づいています。
データ動物園スケール- を定義します ホバー時の総ズームサイズ （例：200％に対して2.0）データ動物園移動- 画像かどうかを定義します カーソルと一緒に動くデータ動物園- ズーム画像を定義します 元の上に表示されますデータ動物園カーソル- を定義します カーソルポイント
最後の5番目のパラメータは何を定義するのを可能にします 新しい画像のURL する必要があります（必要な場合）.
IE9 +を含むすべての主要ブラウザでZooMoveを使用できます。このプラグインは 広く支持されている そしてそれはユーザーエクスペリエンスの1つの大部分を提供します.
あなたが探しているなら 単純なホバーズームライブラリ ZooMoveは素晴らしい選択です。それは 十分に軽量 どのWebサイトでも実行できます jQueryを搭載, ですから、うまく動かすためにそれほど多くのコードを書く必要はありません。.
メインページにアクセスして実際に動作していることを確認し、GitHubのドキュメントをチェックして詳細を確認してください。.
