js, um einfache Lupeneffekte zu erzielen

.Kasten {
 Breite: 450px;
 Höhe: 450px;
 Rand: 100px 0 0 100px;
 Rand: 1px durchgehend rot;
 Position: relativ;
 }

 /* Großes Kästchen rechts */
 .bigBox{
 Breite: 540px;
 Höhe: 540px;
 Position: absolut;
 oben: 100px;
 links: 560px;
 Rand: 1px durchgezogen #ccc;
 Überlauf: versteckt;
 Anzeige: keine;
 }
 .bigBox img {
 Position: absolut;
 links: 0;
 oben: 0;
 }


 /* Überlagerung */
 .box .maske{
 Breite: 260px;
 Höhe: 260px;
 Hintergrundfarbe: gelb;
 /*Transparenz anpassen*/
 Deckkraft: .4;
 Position: absolut;
 links: 0;
 oben: 0;
 /*Standardmäßig verschwinden*/
 Anzeige: keine;
 }

<Skript>
 
 fenster.onload = Funktion (){
 var box = document.querySelector(".box");
 var mask = document.querySelector(".mask");
 var bigBox = document.querySelector(".bigBox");
 var bigImg = document.querySelector(".bigBox > img");
 Konsole.log(bigImg);
 
 //Maus bewegt sich ins Feld.onmouseover = function (){
 document.querySelector(".mask").style.display = "Block";
 document.querySelector(".bigBox").style.display = "Block";
 }
 // Aus der Box herausbewegen.onmouseout = function (){
 document.querySelector(".mask").style.display = "keine";
 document.querySelector(".bigBox").style.display = "keine";
 }

 // Lassen Sie das Overlay der Mausbewegung folgen box.onmousemove = function (){
 // Da die Box einen Rand von 100 Pixeln hat, müssen wir diesen abziehen, da sie sonst falsch ausgerichtet ist. var left = event.pageX - 100 - 130;
 var top = event.pageY – 100 – 130;
 // Das abdeckende Objekt kann den Bereich der Box nicht überschreiten, daher ist es notwendig, den Bereich der Koordinatenwerte zu bestimmen. // Ermitteln Sie die maximale Distanz, über die sich das abdeckende Objekt in der Box bewegen kann. var maskMax = this.offsetWidth - mask.offsetWidth;
 //Richter links
 wenn(links <= 0){
 links = 0;
 }sonst wenn(links >= maskMax){
 links = MaskeMax;
 }

 // Spitze
 wenn(oben <= 0){
 oben = 0;
 }sonst wenn(oben >= maskMax){
 oben = MaskeMax;
 }

 //Setze die linken und oberen Werte auf den Stil mask.style.left = left + "px";
 mask.style.top = oben + "px";
 mask.style.cursor = "bewegen";

// Maximale Verschiebungsdistanz des großen Bildes in der großen Box var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth;
// Linker Wert des großen Bildes var bigImgX = mask.offsetLeft * bigImgMax / maskMax;
// Oberer Wert des großen Bildes var bigImgY = mask.offsetTop * bigImgMax / maskMax;
 // Die Bewegungsrichtung des Overlays ist entgegengesetzt zu der des großen Bildes, daher sollte hier ein negativer Wert angegeben werden bigImg.style.left = -bigImgX + "px";
 bigImg.style.top = -bigImgY + "px";

 }
 }

<div Klasse="Box">
 <img src="../img/small.jpg" alt="">
<div Klasse="Maske">
</div>
<div Klasse="bigBox">
 <img src="../img/big.jpg" alt="">
</div>