ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryプラグインは、マウスが画像の右側を通過したときに大きな画像を表示する効果を実現します(タオバオと同様)_jquery

jqueryプラグインは、マウスが画像の右側を通過したときに大きな画像を表示する効果を実現します(タオバオと同様)_jquery

WBOY
WBOYオリジナル
2016-05-16 17:42:241025ブラウズ

このプラグインの名前は elevatezoom です。Web サイトのアドレスは http://www.elevateweb.co.uk/image-zoom です。github 上のプロジェクトのホームページは https://github.com/elevateweb/elevatezoom です。このWebサイトからダウンロードすることをお勧めします。速度は比較的速いです。

この効果を実現するには、マウスが上を通過したときに表示される 2 つの画像を準備する必要があります。1 つは小さい画像、もう 1 つは大きい画像です。次に、data-zoom-image 属性を img タグに追加するだけで済みます。その値は大きな画像のアドレスであり、最後に JavaScript で画像を選択して elevateZoom() を呼び出します。

例を以下に示します (この例は、github からダウンロードしたコードに含まれています):

コードをコピーコードは次のとおりです。


🎜> jQuery elevateZoom デモ