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:
|
<<: 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
Artikel empfehlen
Beschreibung der Nginx-Zugriffsprotokoll- und Fehlerprotokollparameter
veranschaulichen: Es gibt zwei Haupttypen von Ngi...
Fälle, in denen bestimmte Bibliotheken beim Sichern der Datenbank mit mysqldump ausgeschlossen werden
veranschaulichen: Mit mysqldump –all-databases we...
Vue3 realisiert den Bildlupeneffekt
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden und begrenzen Sie Requisiten in React
Die Requisiten der Komponente (Requisiten sind ei...
MySQL-Gruppe durch Gruppieren mehrerer Felder
Bei täglichen Entwicklungsaufgaben verwenden wir ...
Ein ausführliches Tutorial zur Verwendung von Docker zum Erstellen einer vollständigen Entwicklungsumgebung
Einführung in DNMP DNMP (Docker + Nginx + MySQL +...
Nginx-Weiterleitung basierend auf URL-Parametern
Anwendungsszenarien: Der Sprungpfad muss entsprec...
Das adaptive CSS-Layout realisiert die Gesamtzentrierung von Unterelementelementen und die Linksausrichtung von internen Elementen
Bei der täglichen Arbeit stoßen wir möglicherweis...
So implementieren Sie ein Hover-Dropdown-Menü mit CSS
Wie üblich werde ich heute über einen sehr prakti...
Detaillierte Erläuterung der Verbindungslimitkonfiguration von Nginx für IP-Adressen in einem Netzwerksegment
Das sogenannte Verbindungslimit in Nginx ist tats...
So starten Sie mehrere MySQL-Instanzen in CentOS 7.0 (mysql-5.7.21)
Konfigurationsanweisungen Linux-System: CentOS-7....
So aktualisieren Sie CentOS7 auf CentOS8 (detaillierte Schritte)
Dieser Artikel erläutert anhand eines konkreten B...
Zusammenfassung der gebräuchlichen Buchstaben in Unicode
Die meisten der ersten Computer konnten nur ASCII...
Gängige Angriffe auf Web-Frontends und Möglichkeiten, sie zu verhindern
Die Sicherheitsprobleme, die bei der Frontend-Ent...
Übertragung von Routing-Parametern für die Kommunikation von React-Komponenten (react-router-dom)
Inhaltsverzeichnis Ich habe vor Kurzem React gele...