js realisiert die Lupenfunktion der Shopping-Website

<div Klasse="Box">
        <div Klasse="klein">
            <img src="small3.jpg" alt="">
            <div Klasse="Verschieben"></div>
        </div>
        <div Klasse="groß">
            <img src="big3.jpg" alt="">
        </div>
</div>

.klein{
    Position: relativ;
    schweben: links;
    Breite: 450px;
    Höhe: 450px;
    Rand: 1px durchgezogen #000;
}
.klein .bewegen{
    Position: absolut;
    oben: 0;
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: rgba(0,0,0,0,4);
    Cursor: bewegen;
    Anzeige: keine;
}
.groß{
    Position: relativ;
    schweben: links;
    Breite: 540px;
    Höhe: 540px;
    Rand links: 20px;
    Überlauf: versteckt;
    Rand: 1px durchgezogen #000;
    Anzeige: keine;
}
.bigimg{
    Position: absolut;
    oben: 0;
    links: 0;
}

var box=document.getElementsByClassName('box')[0],small=box.getElementsByClassName('small')[0],move=small.getElementsByClassName('move')[0],smallImg=small.getElementsByTagName('img')[0],big=box.getElementsByClassName('big')[0],bigImg=big.getElementsByTagName('img')[0];
    //Holen Sie sich zuerst alle benötigten Elemente small.onmouseover=function(){
        verschieben.Stil.Anzeige='Block';
        großer.Stil.Anzeige="Block";
    };
    klein.onmouseout=Funktion(){
        verschieben.Stil.Anzeige='keine';
        groß.style.display="keine";
    };
    klein.onmousemove=Funktion(e){
        e=e||window.event; //Überlegungen zur Kompatibilität var x=e.clientX-smallImg.getBoundingClientRect().left-move.offsetWidth/2;
        var y=e.clientY-smallImg.getBoundingClientRect().top-move.offsetHeight/2;
        wenn(x<0){
            x=0;
        }
        wenn(x>smallImg.offsetWidth-move.offsetWidth){
            x=smallImg.offsetWidth-move.offsetWidth;
        }
        wenn(y<0){
            y=0;
        }
        wenn(y>smallImg.offsetHeight-move.offsetHeight){
            y=smallImg.OffsetHeight-move.OffsetHeight;
        }
        Verschiebestil.links=x+"px";
        verschieben.Stil.oben=y+"px";
        //Code zum Implementieren des Linksbewegungsblocks nach der Mausbewegung var scale = bigImg.offsetWidth/smallImg.offsetWidth;
        //Entsprechend den Proportionen vergrößern bigImg.style.left='-'+x*scale+'px';
        //Da das Bild nach links und oben verschoben werden muss, muss ein negatives Vorzeichen hinzugefügt werden bigImg.style.top='-'+y*scale+'px';
    }