JavaScript で Taobao 虫眼鏡を実装する 2 つの方法の紹介 (コード例)

この記事で紹介するのは、JavaScript で淘宝虫眼鏡を実装する 2 つの方法 (コード例) です。必要な方は参考にしていただければ幸いです。

淘宝虫眼鏡とは

これは、マウスを左側のメイン画像の上に移動すると、虫眼鏡が表示されます右 拡大した写真。これを虫眼鏡と呼びます。

おおよその方法

• 最初の方法は、左側に小さな画像、右側に元の画像を配置し、その小さな画像の上にマウスを移動すると、変更されます。同期移動を実現するための左と上の値 (元の画像の位置属性は絶対に設定されます)

• 2 番目の方法は、元の画像の背景位置を変更することです。マウスを小さい値上で移動すると、同期して移動します。

キー操作

• 最初のステップは、小さな画像上のマウスの位置を取得し、マウスの後に続くボックスを配置することです (どのブロックなのかを知っておくべきです。

//e.offsetX ,offsetY是鼠标的位置
//方块的left top在你的鼠标的左上方（网页左上角是原点），因此是减去一个方块的一半。
      var x = e.offsetX - 方块.offsetWidth / 2;
      var y = e.offsetY - 方块.offsetHeight / 2;
      方块.style.left = x + 'px';
      方块.style.top = y + 'px';

これでは明らかに不十分です。

極端な位置/状況も考慮する必要があります
上記の設定のみを使用すると、マウスを画像の端に移動すると、正方形の半分が外側に表示されます。絵。

正解は次のとおりです。ブロックが端に触れると、ブロックは移動できなくなります。マウスはまだ「有効範囲」の外に移動します。下の図の「マウスの活動領域」。

次に、コードを追加する必要があります

      if (x  小图.offsetWidth - 方块.offsetWidth) {
        x = 小图.offsetWidth - 方块.offsetWidth;
      }
      if (y > 小图.offsetHeight - 方块.offsetHeight) {
        y = 小图.offsetHeight - 方块.offsetHeight;
      }

• 2 番目のステップは、左上または背景の位置を制御することです。全体像

      //第一种方法：需要注意的是这里的left 和 top得反过来，你鼠标在小图上往下移的时候，对应的大图其实是往上移的。
      //所以：大图上的left = -小图上的left * 他们的缩放倍率
      大图.style.display = "block";
      大图.style.left = -x * 大图.offsetWidth / 小图.offsetWidth  + 'px';
      大图.style.top = -y * 大图.offsetHeight / 小图.offsetHeight + 'px';
     
     //第二种方法，这里需要注意 backgroundPosition的值是从0 - 100%的（得用百分比表示）；
     //需要注意的是何时为百分百，从上面的极端情况判定我们可以知道
     //x 是从0 到 mask.offsetWidth - rect.offsetWidth；
     //因此这就是0 - 100%；y同理
      大图.style.display = "block";
      大图.style.backgroundPosition =`${x/(mask.offsetWidth - rect.offsetWidth)*100}% ${y/(mask.offsetHeight- rect.offsetHeight)*100}%`;

Notes

• 上で、mousemove イベントを小さな画像 img にバインドしてボックスを検索すると述べました。実際の操作では、img を直接使用してバインドすることはできませんが、バインドする img と同じサイズのマスク レイヤーを使用する必要があります。そうしないと、マウスを動かすと画像が 狂ったように点滅します。 ＃＃＃クレイジー！クレイジー！

#これを調整したい場合は、機能の調整もあります。
もう 1 つの非常に重要な点は、大きな画像
• を表示する右側の

  の p のサイズは、 小さな画像のボックスのサイズでなければならないということです。ピクチャ* ズーム 倍率 のサイズが大きすぎると、余白が多くなり、小さすぎると表示が不完全になります。以下に、家に持ち帰って Crazy Test を実行できるコードがあります。

  #もう少し詳しく

rreeee

以上がJavaScript で Taobao 虫眼鏡を実装する 2 つの方法の紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。