JavaScript implementiert die umfassendste Codeanalyse einer einfachen Lupe (ES5)

In diesem Artikel wird der spezifische Code von JavaScript zur Implementierung einer einfachen Lupe zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Vollständiger Code:

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8">
    <title>ES5-Lupe</title>
    <Stil>
        .Kasten {
            Breite: 170px;
            Höhe: 180px;
            Rand: 100px 200px;
            Rand: 1px durchgezogen #ccc;
            Position: relativ;
        }
        .klein {
            Position: relativ;
        }
        .groß {
            Breite: 300px;
            Höhe: 320px;
            Position: absolut;
            oben: 30px;
            links: 220px;
            Überlauf: versteckt;
            Rand: 1px durchgezogen #ccc;
            Anzeige: keine;
        }
        .Maske {
            Breite: 100px;
            Höhe: 100px;
            Hintergrund: rgba(255,255,0,0,3);
            Position: absolut;
            oben: 0;
            links: 0;
            Cursor: bewegen;
            Anzeige: keine;
        }
        .bigimg{
            Position: absolut;
            links: 0;
            oben: 0;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Box" id="Box">
        <div Klasse="klein">
            <img src="img/shirt_1.jpg" alt="Bild"/>
            <div Klasse="Maske"></div>
        </div>
        <div Klasse="groß">
            <img src="img/shirt_1_big.jpg" alt="Bild"/>
        </div>
    </div>
</body>
<Skript>
 var box = document.getElementById('box');
 var small = box.children[0];//Box für kleine Bilder var big = box.children[1];//Box für vergrößerte Bilder var mask = small.children[1];//Die durchscheinende Maus bewegt sich, um der Box zu folgen var bigImage = big.children[0];//Großes Bild small.onmouseover = function(event){
     großer.Stil.Anzeige = "Block";
     Maske.Stil.Anzeige = "Block";
 }
 klein.onmouseout = Funktion(){
     big.style.display = "keine";
     Maske.Stil.Anzeige = "keine";
 }
 //Verschiebeereignis. Beachten Sie, dass die Positionierung der Maske relativ zum Samplel ist.
 small.onmousemove = Funktion(Ereignis){
     var event = event || window.event; //Ereignisobjekt // console.log(this.offsetLeft); //0, beachten Sie, dass der von offsetLeft zurückgegebene Abstand der linke Abstand des übergeordneten Elements mit Positionierung ist var x = event.clientX-this.offsetParent.offsetLeft-mask.offsetWidth/2; //Kleines offsetLeft kann hier nicht verwendet werden, verwenden Sie obj offsetLeft
     var y = event.clientY-this.offsetParent.offsetTop-mask.offsetHeight/2;
     //Begrenzen Sie die durchscheinende Box außerhalb der Grenzen, wenn (x < 0) {
         x = 0;
     }sonst wenn(x > kleine.OffsetWidth - mask.OffsetWidth){
         x = kleine Offsetbreite – Maskenoffsetbreite;
     }
     wenn( y < 0){
         y = 0;
     }sonst wenn( y > kleine.OffsetHeight - mask.OffsetHeight){
         y = kleine Offsethöhe – Maskenoffsethöhe;
     }
     Maske.Stil.links = x + "px";
     mask.style.top = y + "px";
     // Großes Bild vergrößern bigImage.style.left = -x*big.offsetWidth/small.offsetWidth + 'px';
     großesBild.style.top = -y*große.OffsetHeight/kleine.OffsetHeight + 'px';
     //big.offsetWidth/small.offsetWidth ist der Vergrößerungsfaktor //Da die Maus beim kleinen Bild nach unten und beim großen Bild nach oben wandert, wird eine negative Zahl verwendet}
</Skript>
</html>

Bild:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

js, um einen einfachen Lupeneffekt zu erzielen
js realisiert die Lupenfunktion der Shopping-Website
js, um einfache Lupeneffekte zu erzielen
Native JS-Implementierung der Lupenkomponente
js lupe vergrößerungsbild effekt
Ein einfaches Beispiel für die Verwendung von js, um den Effekt einer Lupe zu erzielen
Eine magische Javascript-Bildlupe
Lupeneffekt in nativem JS geschrieben
Bildlupe jquery.jqzoom.js Anwendungsbeispiel mit Lupensymbol
JS-Version des Bildlupeneffekts

<<: Detaillierte Erläuterung des Startens und Einhängens des Docker-Nginx-Containers in den lokalen

>>: Mehrere Implementierungsmethoden sowie Vor- und Nachteile der SQL-Paging-Abfrage in MySQL