JavaScript imitiert die Spezialeffekte der Jingdong-Lupe

<Stil>
      Körper,
      div {
        Rand: 0;
        Polsterung: 0;
      }
      .Produkt {
        Position: relativ;
        Breite: 400px;
        Höhe: 400px;
        Rand: 50px 0 0 20px;
        Rand: 1px durchgezogen #000;
      }
      .preview_img img {
        Breite: 300px;
        Höhe: 300px;
        Rand: 50px 50px;
      }
      .Maske {
        Position: absolut;
        Anzeige: keine;
        oben: 20px;
        links: 30px;
        Breite: 80px;
        Höhe: 80px;
        Hintergrundfarbe: gelb;
        Deckkraft: 0,5;
        Cursor: bewegen;
      }
      .groß {
        Position: absolut;
        Anzeige: keine;
        links: 410px;
        oben: 0;
        Breite: 500px;
        Höhe: 500px;
        Z-Index: 999;
        Überlauf: versteckt;
      }
      .bigimg {
        Position: absolut;
        oben: 0;
        links: 0;
        Breite: 400px;
        Höhe: 400px;
      }
    </Stil>
    <!-- JS-Datei importieren-->
    <script src="detail.js"></script>
  </Kopf>
  <Text>
    <div Klasse="Produkt">
      <div Klasse="Vorschaubild">
        <img src="images/xs.jpg" alt="" />
        <div Klasse="Maske"></div>
        <div Klasse="groß">
          <img src="images/xs.jpg" alt="" class="bigImg" />
        </div>
      </div>
    </div>
</body>

//Seite vorladen window.addEventListener("load", function () {
  var preview_img = document.querySelector(".preview_img");
  var mask = document.querySelector(".mask");
  var big = document.querySelector(".big");

  //1. Wenn die Maus über preview_img fährt, werden die Masken-Okklusionsebene und die große Box angezeigt und ausgeblendet preview_img.addEventListener("mouseover", function () {
    Maske.Stil.Anzeige = "Block";
    großer.Stil.Anzeige = "Block";
  });
  preview_img.addEventListener("mouseout", Funktion () {
    mask.style.display = "keine";
    big.style.display = "keine";
  });
  //Es ist nicht sinnvoll, der Okklusionsebene die Mauskoordinaten zuzuweisen, da die Koordinaten der Okklusionsebene auf der übergeordneten Box basieren preview_img.addEventListener("mousemove", function (e) {
    //(1) Berechne zunächst die Koordinaten der Maus in der Box var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    //(2) Subtrahieren Sie die Hälfte der Höhe und Breite der Box. //(3) Die Distanz, über die sich die Maske bewegt. var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;
    //(4) Wenn die Koordinate kleiner als 0 ist, lass es an Position 0 anhalten (d. h. anhalten, wenn es den Boxbereich überschreitet)
    var egdeX = preview_img.offsetWidth - mask.offsetWidth;
    var egdeY = preview_img.offsetHeight - mask.offsetHeight;
    wenn (MaskeX <= 0) {
      MaskeX = 0;
    } sonst wenn (maskX >= egdeX) {
      MaskeX = EckX;
    }
    wenn (MaskeY <= 0) {
      MaskeY = 0;
    } sonst wenn (MaskeY >= RandY) {
      MaskeY = RandY;
    }
    mask.stil.links = maskX + "px";
    mask.style.top = maskY + "px";
    //Die Bewegungsdistanz des großen Bildes = die Bewegungsdistanz der verdeckenden Ebene * die maximale Bewegungsdistanz des großen Bildes / die maximale Bewegungsdistanz der verdeckenden Ebene var bigImg = document.querySelector(".bigImg");
    //Die maximale Bewegungsdistanz des großen Bildes var bigMax = bigImg.offsetWidth - big.offsetWidth;
    //Die Bewegungsdistanz xy des großen Bildes
    var bigX = (MaskeX * bigMax) / egdeX;
    var bigY = (maskY * bigMax) / egdeY;
    bigImg.style.left = -bigX + "px";
    bigImg.style.top = -bigY + "px";
  });
});