Detaillierte Erläuterung der perfekten CSS3+JS-Implementierung des Lupenmodus

Detaillierte Erläuterung der perfekten CSS3+JS-Implementierung des Lupenmodus

Vor etwa einem Jahr habe ich einen Artikel geschrieben: Analyse der Prinzipien mehrerer Möglichkeiten, den Lupeneffekt zu imitieren. Damals hatte ich das Gefühl, dass meine Fähigkeiten gut genug waren und ich war stolz darauf, also gab ich ihm einen so prahlerischen Titel. Tatsächlich wurden darin nur zwei Animationsmethoden in CSS eingeführt: Transformieren und Animieren. Natürlich war der erzielte Effekt auch sehr einfach ... Ich schäme mich.

Obwohl wir mit dem Fortschritt der Technologie nach und nach eine Leinwandlupe und ein weiteres Modell im „Taobao-Stil“ mit reinem JS realisierten, war dies immer noch unbefriedigend: weil die Implementierung zu kompliziert war und größtenteils auf der JS-Logik beruhte. Die Bewegungs- und Anzeigeeffekte beruhten alle auf JS, und der Versatz wurde über JS berechnet und dann der Stil gerendert.

Aber das Aufkommen benutzerdefinierter CSS3-Variablen hat mir Hoffnung gegeben!

Erster Blick auf die Wirkung:

CSS3+JS-Implementierung der Lupe

Seine Kernimplementierung:

  • CSS-Funktionen wie: calc() – dynamische Berechnung; var() – benutzerdefinierte Variablen verwenden
  • CSS-Pseudoelemente: ::before/after – einfach zu steuern, unabhängig vom Dokumentfluss und einfach darzustellen
  • JS API: offsetX/offsetY : Position relativ zur oberen linken Ecke des übergeordneten Knotenbereichs
  • …

Was wir konkret erreichen wollen, ist nämlich: Beim Hineinbewegen der Maus wird ein kleiner Kreis angezeigt (der der Maus folgt), und überall wo dieser kleine Kreis hingeht, wird der Bildbereich dort um das entsprechende Vielfache vergrößert und im Kreis angezeigt.

Warum die Offset-API verwenden?
Tatsächlich müssen wir gemäß der obigen Beschreibung den linken und oberen Versatz der Maus in Echtzeit ermitteln, und diese beiden Versätze sind relativ zum übergeordneten Knoten. Die Anzeigeposition des Lupeninhalts relativ zum übergeordneten Knoten kann durch Kombinieren des linken und des oberen Versatzes mit calc() berechnet werden.
Es ist nicht schwer herauszufinden, dass js uns im Mausereignisobjekt die folgende API zur Verfügung stellt:

  • screenX/screenY : Position relativ zur oberen linken Ecke des Bildschirmbereichs. Wenn gescrollt wird, Position relativ zu diesem Bereich.
  • pageX/pageY : Position relativ zur oberen linken Ecke des Webseitenbereichs
  • clientX/clientY : Position relativ zur oberen linken Ecke des sichtbaren Bereichs des Browsers
  • offsetX/offsetY : Position relativ zur oberen linken Ecke des übergeordneten Knotenbereichs. Wenn kein übergeordneter Knoten vorhanden ist, Position relativ zu <html> oder <body>

Im Vergleich dazu erfüllt nur die Position „versetzt zum übergeordneten Element“ die Anforderungen.

<div Klasse="bruce">
    <div Klasse = "Magnifier"></div>
</div>
: Lassen Sie die Lupe = document.querySelector(".magnifier");
magnifier.addEventListener("Mausbewegung",e=>{
	//Steuern Sie die Bewegung des kleinen Kreises des „Spiegels“});

Die Lupe zeigt den Inhalt an, indem sie das Originalbild N-mal vergrößert und einen bestimmten Bereich proportional abfängt, um den Inhalt durch den obigen Versatz anzuzeigen.

Definieren Sie zunächst die relevanten CSS-Variablen. Wir stellen die Vergrößerung auf das 2,5-fache ein, sodass die Breite und Höhe des vergrößerten Bildes ebenfalls das 2,5-fache der ursprünglichen Breite und Höhe beträgt. Deklarieren Sie zwei Variablen, unterteilt in --x und --y :

:Wurzel{
    --Verhältnis: 2,5;
    --Box-B: 600px;
    --Box-h: 400px;
    --outbox-w: Berechnung(var(--box-w) * var(--ratio));
    --outbox-h: berechnen(var(--box-h) * var(--ratio));
}
.bruce{
    Rand oben: 50px;
}
.Magnifier{
    --x:0;
    --y:0;
    Überlauf: versteckt;
    Position: relativ;
    Breite: var(--box-w);
    Höhe: var(--box-h);
    Hintergrund: URL("img/nan.png") keine Wiederholung Mitte/100 % 100 %;
    Cursor: greifen;
}

Das Bild wird als Hintergrundbild angezeigt, wodurch sich die Größe leicht kontrollieren lässt.

In diesem Szenario ist es offensichtlich nicht erforderlich, einen untergeordneten Knoten als Container für die Lupe einzufügen. Verwenden Sie einfach ::before !

Die Lupe ist im Gebrauch 100 Pixel breit und hoch, und im Nichtgebrauch 0 Pixel breit und hoch. Die Position der Lupe bei Bewegung der Maus wird durch absolute Positionierung festgelegt, d. h. durch Deklarieren von links und oben und anschließendes Ausfüllen der Position der Lupe durch Deklarieren von transform:translate(-50%,-50%) sodass die Mitte der Lupe mit der Position des Mauszeigers übereinstimmt. Da „left“ und „top“ deklariert werden, um die Position der Lupe zu lokalisieren, kann will-change auch deklariert werden, um Leistungsprobleme zu verbessern, die durch Änderungen an „left“ und „top“ verursacht werden!
Ein weiterer Vorteil der Verwendung von CSS zur Lösung dieser Probleme besteht darin, dass wir mit Hilfe von Pseudoelementen/Pseudoklassen CSS zur Lösung einiger der detaillierteren Dinge verwenden können, anstatt uns auf „schweres“ JavaScript zu verlassen. Beispiel: Maus wechselt in den Hover-Stil:

.magnifier::before{
    --Größe: 0;
    Position: absolut;
    links: var(--x);
    oben: var(--y);
    Randradius: 100 %;
    Breite: var(--size);
    Höhe: var(--size);
    Kastenschatten: 1px 1px 3px rgba(0,0,0,.5);
    Inhalt: "";
    wird sich ändern: links, oben;
    transformieren: übersetzen(-50 %,-50 %);
}
.magnifier:hover::vorher{
    --Größe: 100px;
}

Verwenden Sie als Nächstes den Hintergrund, um den Lupeninhalt zu implementieren (anzuzeigen). Entsprechend der 2,5-fachen Vergrößerung können Sie size: --outbox-w --outbox-h deklarieren und den Hintergrund durch Position-x und Position-y verschieben. Schließlich können Sie es als background:#333 url(背景圖片) no-repeat var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h) .
Unter diesen entsprechen --scale-x und --scale-y position-x und position-y (dh background-position ), die verwendet werden, um die Hintergrundposition bei Bewegung der Maus zu ändern.

--scale-x: berechnen(var(--size) / var(--ratio) - var(--ratio) * var(--x));
--scale-y: calc(var(--size) / var(--ratio) - var(--ratio) * var(--y));

Dann können die „Positionskoordinaten“ des Spiegels in der obigen Mausbewegungsfunktion wie folgt geschrieben werden:

e.target.style.setProperty("--x",`${e.offsetX}px`);
e.target.style.setProperty("--y",`${e.offsetY}px`);

so einfach~

Der endgültige CSS-Inhalt lautet wie folgt:

:Wurzel{
    --Verhältnis: 2,5;
    --Box-B: 600px;
    --Box-h: 400px;
    --outbox-w: Berechnung(var(--box-w) * var(--ratio));
    --outbox-h: berechnen(var(--box-h) * var(--ratio));
}
.bruce{
    Rand oben: 50px;
}
.Magnifier{
    --x:0;
    --y:0;
    Überlauf: versteckt;
    Position: relativ;
    Breite: var(--box-w);
    Höhe: var(--box-h);
    Hintergrund: URL("img/nan.png") keine Wiederholung Mitte/100 % 100 %;
    Cursor: greifen;
}
.magnifier::before{
    --Größe: 0;
    --scale-x: berechnen(var(--size) / var(--ratio) - var(--ratio) * var(--x));
    --scale-y: calc(var(--size) / var(--ratio) - var(--ratio) * var(--y));
    Position: absolut;
    links: var(--x);
    oben: var(--y);
    Randradius: 100 %;
    Breite: var(--size);
    Höhe: var(--size);
    Hintergrund: #333 URL("img/nan.png") keine Wiederholung var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h);
    Kastenschatten: 1px 1px 3px rgba(0,0,0,.5);
    Inhalt: "";
    wird sich ändern: links, oben;
    transformieren: übersetzen(-50 %,-50 %);
}
.magnifier:hover::vorher{
    --Größe: 100px;
}

Wenn Sie ein Bild verwenden möchten, das in ::before doppelt so groß ist, ersetzen Sie --outbox-w und --outbox-h durch die ursprünglichen --box-w und --box-h im Hintergrund und nehmen Sie die entsprechenden Anpassungen vor.

Achten Sie auf den Inhalt Ihrer Lupe, er zeigt, dass es sich nicht nur um eine einfache Vergrößerung des Bildes handelt, es gibt also den Code var(--size) / var(--ratio) ;
Zum Ändern von benutzerdefinierten CSS3-Variablen in CSS: Ich bin immer noch der Meinung, dass diese nur im Rahmen des „gleichen Niveaus und der gleichen Zugehörigkeit“ erfolgreich geändert und angezeigt werden können.

Dies ist das Ende dieses Artikels darüber, wie man den Lupenmodus mit CSS3+JS perfekt implementiert. Weitere relevante CSS3+JS-Lupeninhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Zählen Sie die Listen-Tags in HTML

>>:  So deaktivieren Sie Webseitenstile mit dem Webentwickler von Firefox

Artikel empfehlen

Delegieren von Berechtigungen in Linux mit Sudo

Einführung in die Sudo-Autoritätsdelegierung su-S...

JavaScript zum Erzielen eines Kalendereffekts

In diesem Artikel wird der spezifische Code für J...

HTML-Codeanalyse der Textkonvertierungseffekte bei Links- und Rechtsbewegungen

<div ausrichten="zentrieren"> <...

Beim Zugriff auf die Homepage eines im Docker-Modus gestarteten Tomcat tritt ein 404-Fehler auf

Szenario: Beim Starten von Tomcat in Docker (Vers...

JavaScript implementiert die Klick-Umschaltfunktion

In diesem Artikelbeispiel wird der spezifische Ja...

Detaillierte Erläuterung der Konfiguration der Yum-Quelle von Docker und deren Installation in CentOS7

Hier kommt CentOS7 zum Einsatz und die Kernel-Ver...

Drei Möglichkeiten zur Realisierung der horizontalen Zentrierung von Elementen und zum Verständnis der Konzepte von festem Layout und fließendem Layout

Die Eigenschaft, Text in CSS zu zentrieren, lässt ...

MySQL REVOKE zum Löschen von Benutzerberechtigungen

In MySQL können Sie mit der REVOKE-Anweisung best...

webpack -v Fehlerlösung

Hintergrund Ich möchte die Webpack-Version überpr...

Installations- und Konfigurationsmethode für komprimierte MySQL Community Server-Pakete

Da ich heute MySQL installieren wollte, bin ich a...

Implementierung eines einfachen Rechners mit Javascript

In diesem Artikelbeispiel wird der spezifische Ja...

HTML-Tabellen-Markup-Tutorial (18): Tabellenkopf

<br />Die Kopfzeile bezieht sich auf die ers...

Detaillierte Erklärung zur Verwendung von MySQL DML-Anweisungen

Vorwort: Im vorherigen Artikel haben wir hauptsäc...

Docker-Bereitstellung - Nginx-Implementierungsprozess - Grafik und Text - detaillierte Erläuterung

1. Laden Sie nginx herunter [root@localhost my.Sh...

Detaillierte Erklärung zur Konfiguration des Keepalived-Protokolls auf einem anderen Pfad in CentOS7

Keepalived-Installation: cd <keepalived_source...