画像拡大鏡エフェクトの JS 実装ユースケース

今回は、画像拡大鏡効果を実現するためのJSのユースケースをお届けします。 以下は、画像拡大鏡効果を実現するための注意事項を紹介します。 。

前の言葉

私たちはさまざまな電子商取引 Web サイトにアクセスすることが多く、商品の詳細を確認するには虫眼鏡を使用する必要があります。今日は、画像がどのように拡大されるかを確認するための画像拡大鏡プラグインを作成します。 ..

まずは、それを達成した場合の最終的な効果を見てみましょう

効果を読んだ後、何かアイデアはありますか? そうでない場合は、それを達成する方法を見てみましょう~

1 実装アイデア

① 上を向いた後にズームインする効果を実現するには、3 つの ps を作成する必要があります。1 つは元の画像を配置するために使用され、もう 1 つは拡大効果の p を配置するために使用され、最後の 1 つは p の部分ですこれは、マウスを上に向けた後に拡大する必要があります (代わりにこの pp タグを使用します)。

② 拡大率を決定する最も重要な点は、マウスの指の p と拡大効果の p が元の画像と拡大された画像の比率と同じである必要があります。

③マウスオーバーすると拡大効果が表示されます。

2 具体的な実装手順

まず、3 つの P を作成しましょう。

りー

HTML コード部分が完成しました。次に、JS を使用して関数を実装します。 元の画像に 3 つのイベント、つまりマウスの入力、マウスの移動、およびマウスの移動を追加します。

元画像内にマウスを移動すると、マウスが上を向いているときのpと拡大効果のpが同時に表示されます。

りー

マウスアウトイベント:

<p id="wrapper"> 
     <!--小图-->
    <p id="img_min"> 
       <!--图片-->
       <img src="img/11.png" alt="min"> 
       <!--跟随鼠标的白块-->
       <p id="mousebg"></p> 
     </p> 
   <!--大图-->
     <p id="img_max">
       <img id="img2_img" src="img/11.png" alt="max">
     </p> 
   </p>

ポイントは、マウスを動かすと、pタグの位置と元の画像をもとに、大きな画像のうち拡大したい部分が表示されるということです。

りー

位置分析を行う場合、考慮すべき重要な状況が 4 つあります:

つまり、マウスが画面の上下左右から入ったばかりで、その距離がマウスの指の p の幅の半分未満の場合は、拡大された p が表示され、動きません。

りー

最後に、大きな画像の表示範囲を計算します:

img1.onmouseover = function () { 
       //鼠标进入 
       img2.style.display = 'block'; 
       mousebg.style.display = 'block'; 
      
     }

このように、JS を使用して画像拡大鏡プラグインを実装します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上が画像拡大鏡エフェクトの JS 実装ユースケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。