JavaScript zum Erzielen eines Produktlupeneffekts

<Stil>
        .klein{
            Position: relativ;
            Breite: 400px;
            Höhe: 450px;
            Rand: 1px durchgezogen #ccc;
        }
        .kleines Bild{
            Breite: 100 %;
            Höhe: 100%;
        }
        .klein .maske{
            Position: absolut;
            links: 0;
            oben: 0;
            Breite: 300px;
            Höhe: 300px;
            Hintergrundfarbe: rgba(0, 255, 0, .2);
        }
        .groß{
            Position: absolut;
            links: 450px;
            oben: 8px;
            Breite: 550px;
            Höhe: 550px;
            Rand: 1px durchgezogen #ccc;
            Überlauf: versteckt;
            Anzeige: keine;
        }
        .bigimg{
            Position: absolut;
            links: 0;
            oben: 0;
        }
    </Stil>
 
<Text>
    <div Klasse="klein">
        <img src="./img/small.jpg">
        <div Klasse="Maske"></div>
    </div>
    <div Klasse="groß">
        <img src="./img/big.jpg">
    </div>
</body>

<Skript>
        var small = document.querySelector('.small');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        var bigImg=document.querySelector('.big>img');
        // Breite und Höhe des großen Bildes abrufen var bigWidth=bigImg.offsetWidth;
        var bigHeight=bigImg.offsetHeight;
 
        // 
        Funktion verschieben(e){
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            konsole.log(x,y);
            // Verschieben Sie die Maskenposition var maskHeight = mask.offsetHeight/2;
            var Maskenbreite = Maskenoffsetbreite/2;
            mask.style.left = x - Maskenbreite+'px';
            mask.style.top = y - Maskenhöhe + 'px';
 
        // Bewegungsbereich der Maske begrenzen // console.log('mask.offsetTop',mask.offsetTop);
            // console.log('mask.offsetLeft',mask.offsetLeft);
            var maxLeft=small.offsetWidth - mask.offsetWidth;
            wenn(Maske.OffsetTop<0){
                Maske.Stil.oben=0;
            }
            wenn(Maske.OffsetLinks > kleine.OffsetBreite - Maske.OffsetBreite){
                Maske.Stil.links =maxLinks+'px';
            }
            wenn(Maske.OffsetLeft<0){
                Maske.Stil.links = 0;
            }
            wenn(Maske.OffsetOben > kleine.OffsetHöhe - Maske.OffsetHöhe){
                mask.style.top = kleine.OffsetHeight - mask.OffsetHeight + 'px';
            }
 
        // bigImg großes Bild große Box großes Bild Bewegung // (bigImg.offsetWidth - big.offsetWidth) / (samll.offsetWidtth - mask.offsetWidth)
        // Maximale Bewegungsdistanz des großen Bildes = - Bewegungsdistanz der Maske * Maximale Distanz des großen Bildes / Maximale Bewegungsdistanz der Maske bigImg.style.left = -mask.offsetLeft*(bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth)+"px";
            großesBild.style.top = -mask.offsetTop*(großesBild.offsetHeight - große.offsetHeight) / (kleine.offsetHeight - mask.offsetHeight)+"px";
        }
       
        // Verschieben Sie die Maske auf dem kleinen Bildsmall.addEventListener('mousemove',move);
        small.addEventListener('mouseover',Funktion(){
            großer.Stil.Anzeige='Block';
            Maske.Stil.Anzeige='Block';
        })
        small.addEventListener('mouseout',Funktion(){
            groß.style.display='keine';
            Maske.Stil.Anzeige='keine';
        })
</Skript>