JavaScript-Implementierung von Lupendetails

 <div Klasse="wrap">
    <!-- Miniaturansicht und Maske -->
    <div id="klein">
      <img src="img/1.jpg" alt="" >
      <div id="Markierung"></div>
    </div>
    <!-- Vergrößertes Bild im gleichen Maßstab -->
    <div id="groß">
      <img src="img/2.jpg" alt="" id="bigimg">
    </div>
  </div>

 * {
      Rand: 0;
      Polsterung: 0;
    }
    .wickeln {
      Breite: 1500px;
      Rand: 100px automatisch;
    }

    #klein {
      Breite: 432px;
      Höhe: 768px;
      schweben: links;
      Position: relativ;
    }

    #groß {
      /* Hintergrundfarbe: seegrün; */
      Breite: 768px;
      Höhe: 768px;
      schweben: links;
      /* Der Teil hinter dem Sucher ist verborgen*/
      Überlauf: versteckt;
      Rand links: 20px;
      Position: relativ;
      Anzeige: keine;
    }

    #großesBild {
      /* Breite: 864px; */
      Position: absolut;
      links: 0;
      oben: 0;
    }

    #markieren {
      Breite: 220px;
      Höhe: 220px;
      Hintergrundfarbe: #fff;
      Deckkraft: .5;
      Position: absolut;
      links: 0;
      oben: 0;
      /* Mauspfeilstil*/
      Cursor: bewegen;
      Anzeige: keine;
    }

// Holen Sie sich das kleine Bild und die Maske, das große Bild und die große Box var small = document.getElementById("small")
    var Markierung = document.getElementById("Markierung")
    var groß = document.getElementById("groß")
    var bigimg = document.getElementById("bigimg")
    //Mausbewegungsereignisse im kleinen Bildbereich abrufen; die Maske folgt der Mausbewegung small.onmousemove = function (e) {
      // Den Versatz der Maske relativ zum Miniaturbild abrufen (Mauskoordinaten – Versatz des Miniaturbilds relativ zum Hauptteil – die Hälfte der Breite oder Höhe der Maske)
      var s_left = e.pageX - Markierung.OffsetWidth / 2 - small.OffsetLeft
      var s_top = e.pageY - Markierung.OffsetHeight / 2 - small.OffsetTop
      // Die Maske kann nur innerhalb des Miniaturbildes verschoben werden, daher muss der Schwellenwert des Maskenversatzes (relativ zum Miniaturbildwert) berechnet werden
      var max_left = kleine.OffsetWidth - Markierung.OffsetWidth;
      var max_top = kleine.OffsetHeight - Markierung.OffsetHeight;
      // Wenn sich die Maske bewegt, bewegt sich auch das große Bild rechts (für jedes Pixel, um das sich die Maske bewegt, muss sich das Bild n-mal in die entgegengesetzte Richtung bewegen)
      var n = große.OffsetWidth / mark.OffsetWidth
      // Beurteilen Sie, bevor die Maske der Mausbewegung folgt: Der Versatz der Maske relativ zum Miniaturbild darf den Bereich nicht überschreiten und muss neu zugewiesen werden, wenn er den Bereich überschreitet (der kritische Wert wurde oben berechnet: max_left und max_top)
      // Bestimme die horizontale Grenze, wenn (s_left < 0) {
        s_links = 0
      } sonst wenn (s_left > max_left) {
        s_links = max_links
      }
      //Beurteile die vertikale Grenze, wenn (s_top < 0) {
        s_top = 0
      } sonst wenn (s_top > max_top) {
        s_top = max_top
      }
      //Der Maske links und oben Werte zuweisen (dynamisch? Denn e.pageX und e.pageY sind veränderliche Größen), verschieben!
      Markierung.Stil.links = s_links + "px";
      mark.style.top = s_top + "px";
      // Berechnen Sie die Distanz, über die sich das große Bild bewegt. var levelx = -n * s_left;
      var vertikaly = -n * s_top;
      // Bild verschieben bigimg.style.left = levelx + "px";
      bigimg.style.top = vertikal + "px";
    }
    // Die Maske und der Folgestil werden nur angezeigt, wenn die Maus in das kleine Bild hineinbewegt wird und verschwinden, wenn die Maus aus dem kleinen Bild herausbewegt wird small.onmouseenter = function () {
      mark.style.display = "Block"
      großer.Stil.Anzeige="Block"
    }
    klein.onmouseleave = Funktion () {
      mark.style.display = "keine"
      big.style.display="keine"
    }