js-Simulation, um den Effekt der Bildvergrößerung auf der Jingdong-Detailseite zu erzielen

<div Klasse="Vorschaubild">
 <img src="upload/s3.png" alt="">
 <div Klasse="Maske"></div>
 <div Klasse="groß">
  <img src="upload/big.jpg" alt="" class="bigImg">
 </div>
</div>

.vorschau_img {
 Position: relativ;
 Höhe: 398px;
 Rand: 1px durchgezogen #ccc;
}
.Maske {
 Anzeige: keine;
 Position: absolut;
 Breite: 300px;
 Höhe: 300px;
 oben: 0;
 links: 0;
 Hintergrund: #FEFE4F;
 Deckkraft: .5;
 Rand: 1px durchgezogen #ccc;
 Cursor: bewegen;
}
.groß {
 Anzeige: keine;
 Position: absolut;
 Breite: 550px;
 Höhe: 550px;
 oben: 0;
 links: 410px;
 Z-Index: 999;
 Rand: 1px durchgezogen #ccc;
 Überlauf: versteckt;
}
.bigimg {
 Position: absolut;
 links: 0;
 oben: 0;
}

window.addEventListener('laden',Funktion(){
    var preview_img = document.querySelector('.preview_img');
    var Maske = dieses.Dokument.AbfrageSelector('.Maske');
    var big = dieses.Dokument.QuerySelector('.big');
    var bigImg = dieses.document.querySelector('.bigImg');
    //Mit der Maus darüberfahren preview_img.addEventListener('mouseover',function(){
        Maske.Stil.Anzeige = "Block";
        großer.Stil.Anzeige = "Block";
    })
    //Maus raus preview_img.addEventListener('mouseout',function(){
        Maske.Stil.Anzeige = "keine";
        big.style.display = "keine";
    })
    //Wenn die Maus bewegt wird preview_img.addEventListener('mousemove',function(e){
        //Die Koordinaten der Maus in der Box var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        //Die Distanz, über die sich die Okklusionsebene bewegt, var maskX = x - mask.offsetWidth/2;
        var maskY = y-mask.offsetHeight/2;
        //Bewegungsdistanz für große Bilder //Maximale Bewegungsdistanz der Okklusionsebene var maskMaxX = preview_img.offsetWidth - mask.offsetWidth;
        var maskMaxY = preview_img.offsetHeight - mask.offsetHeight;
        //Wenn die X-Koordinate kleiner als 0 ist, lass sie auf 0 bleiben if (maskX <= 0) {
            MaskeX = 0;
        }sonst wenn (MaskeX >= MaskeMaxX) {
            MaskeX = MaskeMaxX;
        }
        //Wenn die Y-Koordinate kleiner als 0 ist, lass sie auf 0 bleiben if (maskY <= 0) {
            MaskeY = 0;
        }sonst wenn (MaskeY >= MaskeMaxY) {
            MaskeY = MaskeMaxY;
        }
        //Bewegung der Okklusionsebene mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        
        //Die maximale Bewegungsdistanz des großen Bildes var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
        var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
        //Die Bewegungsdistanz des großen Bildes XY
        // Bewegungsdistanz des großen Bildes = Bewegungsdistanz der Okklusionsebene * Maximale Bewegungsdistanz des großen Bildes / Maximale Bewegungsdistanz der Okklusionsebene var bigX = maskX * bigMaxX / maskMaxX;
        var bigY = MaskeY * bigMaxY / MaskeMaxY;
        //Das große Bild und das kleine Bild (Mausbewegung) zeigen in entgegengesetzte Richtungen bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})