Vue implementiert den Lupeneffekt beim Tab-Umschalten
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Erzielung des Lupeneffekts beim Tab-Umschalten als Referenz geteilt. Der spezifische Inhalt ist wie folgt Schauen wir uns ohne weitere Umschweife die Renderings an
1. Ich habe hier keine Maskenebene hinzugefügt. Bitte fügen Sie bei Bedarf eine hinzu 2. Es wird empfohlen, 4K-HD-Bilder zu verwenden, da diese sonst nach der Vergrößerung unscharf werden, was die Sehstimmung beeinträchtigt 3. Seien Sie nicht zu starr hinsichtlich des Stils, konzentrieren Sie sich nur auf das Umsetzungsprinzip 4. Vielleicht ist meine Methode nicht einfach, aber sie ist auch eine Denkweise. Bitte beziehen Sie sich darauf. UmsetzungsprinzipZunächst einmal brauchen Sie unbedingt vue.js Für die zweite Methode werden zwei Bilder benötigt. Die linke Seite ist das reale Bild und die rechte Seite ist das vergrößerte Effektbild. Tatsächlich hat es schon immer existiert, aber es bewegt die Maus nur in die Realität und verschwindet, wenn die Maus herausbewegt wird. Das vergrößerte Bild wird nicht wirklich vergrößert, aber dem img-Tag wird ein übergeordnetes Element hinzugefügt, und die Breite und Höhe des img-Tags werden auf mehr als 100 % eingestellt. Sie können den Vergrößerungsgrad beliebig einstellen und dann festlegen, dass das übergeordnete Element ausgeblendet wird, wenn es den Grenzwert überschreitet, und dann display:none festlegen, um das Element auszublenden, und es dann anzeigen, wenn die Maus in das große Bild links bewegt wird. Um das vergrößerte Bild bei Bewegung der Maus zu bewegen, müssen wir die Position der Maus auf dem Element ermitteln, es mit dem Mausbewegungsereignis auslösen, die relative Positionierung für das vergrößerte Bild festlegen und dann die X-Achsenposition und die Y-Achsenposition der Maus jeweils links und oben im großen Bild zuweisen. ----------------------------------- Universelle Trennlinie --------------------------- Einfach ausgedrückt, das vergrößerte Bild existiert bereits, ist aber so eingestellt, dass es ausgeblendet wird. Es wird angezeigt, nachdem die Maus hineinbewegt wurde. Anschließend wird die Position der Maus ermittelt und dem relativen Positionswert des großen Bildes zugewiesen. Dies ist das Implementierungsprinzip der Lupe. Das Wechseln zwischen Registerkarten ist einfacher Sie müssen vues v-show verwenden, um ein Array in Daten zu erstellen und die Bildadresse im Array zu speichern. Verwenden Sie v-for, um die Bildadresse zum img-Tag zu durchlaufen. Erstellen Sie einen nowindex in Daten und weisen Sie den Bildindex nowindex zu. Verwenden Sie v-show="nowindex == index", um die Anzeige und Ausblendung des Bilds zu steuern. Hier ist der Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<script src="./vue/vue.js"></script>
<Stil>
Körper {
Rand: 0;
Polsterung: 0;
Hintergrundfarbe: #ccc;
}
#app {
Höhe: 245px;
Breite: 556px;
/* Rand: 3px durchgezogen; */
Position: relativ;
Rand: 200px automatisch;
Box-Größe: Rahmenbox;
}
.Inhalt {
Höhe: 150px;
Breite: 250px;
Rahmen unten: 5px durchgehend weiß;
}
.imgs {
Höhe: 90px;
Breite: 248px;
Box-Größe: Rahmenbox;
Anzeige: Flex;
Inhalt ausrichten: Abstand dazwischen;
}
.imger {
Höhe: 99%;
Breite: 49,6 %;
}
.Inhalt>Bild {
Höhe: 100%;
Breite: 100 %;
}
.aktiv {
Box-Schatten: 0px 8px 8px schwarz;
Deckkraft: 0,7;
}
.fdj {
Anzeige: keine;
}
.block {
Höhe: 240px;
Breite: 300px;
Position: absolut;
oben: 0px;
rechts: -10px;
Überlauf: versteckt;
Z-Index: 100;
Rahmenradius: 8px;
}
.block>img {
Höhe: 600%;
Breite: 600 %;
Position: relativ;
}
</Stil>
</Kopf>
<Text>
<div id="app">
<div class="Inhalt" @mouseover="über" @mouseout="raus" @mousemove='Bewegen($Event)'>
<img :src=item v-for="(item,index) in url" v-show='index == nowindex'>
</div>
<div Klasse="imgs">
<img :src=item v-for="(item,index) in url" class="imger" @click="change(index)" :class="{active:index == nowindex}">
</div>
<div: Klasse = "Blöcke">
<img :src=item v-for="(item,index) in url" v-show='index == nowindex' :style='positionen'>
</div>
</div>
<Skript>
var vm = neuer Vue({
el: "#app",
Daten: {
//Bildadresse-URL: ['./img/11.jpg', "./img/9.jpg"],
Jetztindex: 0,
Blöcke: "fdj",
//Relative Positionierungswertpositionen: {
oben: 0,
links: 0
}
},
Methoden: {
ändern(index) {
//Bild wechseln this.nowindex = index;
},
über() {
//Anzeigen und Ausblenden durch Ändern des Klassennamens this.blocks = "block"
},
aus() {
diese.blöcke = "fdj"
},
bewegen(e) {
// Weisen Sie die Mausbewegungsposition dem relativen Positionierungswert des Bildes zu, um die Bewegung des Bildes zu realisieren, wenn sich die Maus bewegt. this.positions.top = (e.offsetY * -7,9) + "px";
diese.positionen.links = (e.offsetX * -6) + "px";
}
},
})
</Skript>
</body>
</html>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:
|
<<: Docker installiert Redis und führt den visuellen Client für den Betrieb ein
>>: Implementierung von zwei Basis-Images für die Docker-Bereitstellung von Go
Artikel empfehlen
So verwenden Sie Provide zur Implementierung der Statusverwaltung in Vue3
Inhaltsverzeichnis Vorwort So implementieren Sie ...
Detaillierte Fehlerbehebung bei Docker.service-Startfehlern
Führen Sie den folgenden Befehl aus, um einen Feh...
So löschen Sie den MySQL-Dienst vollständig (bereinigen Sie die Registrierung)
Vorwort Beim Installieren der ausführbaren Datei ...
Detaillierte Erklärung von JavaScript Reduce
Inhaltsverzeichnis Karte Filter manche jeder Inde...
MySQL-Fehlernummer 1129 – Lösung
SQLyog stellt eine Verbindung zu MySQL her, Fehle...
Nginx-Konfiguration 80 Portzugriff 8080 und Analyse der Projektnamenadressenmethode
Tomcat greift auf das Projekt zu, normalerweise I...
Verwenden Sie CSS-Mischmodi und SVG, um die Farbe Ihrer Produktbilder dynamisch zu ändern
Vor ein paar Tagen habe ich auf Codepen ein Beisp...
Detaillierte Erklärung des Unterschieds zwischen Pfeilfunktionen und normalen Funktionen in JavaScript
In diesem Artikel wird der Unterschied zwischen P...
Detaillierte Erläuterung der MySQL-Lösung zur USE DB-Überlastung
Wenn wir auf einen Fehler stoßen, denken wir oft ...
Ideen und Codes zur Implementierung von Iframes, um einen Teil des Website-Inhalts abzufangen
Code kopieren Der Code lautet wie folgt: <div ...
Implementierungs- und Nutzungsszenarien der JS-Anti-Shake-Drosselungsfunktion
Inhaltsverzeichnis 1. Was ist die Anti-Shake-Funk...
Eine kurze Diskussion über den virtuellen Speicher von Linux
Inhaltsverzeichnis Herkunft Virtueller Speicher P...
Centos8 erstellt NFS basierend auf KDC-Verschlüsselung
Inhaltsverzeichnis Konfiguration NFS-Server (nfs....
So konfigurieren Sie die bidirektionale Zertifikatsüberprüfung auf dem Nginx-Proxyserver
Generieren einer Zertifikatskette Verwenden Sie d...
Ein kurzer Überblick über CSS3-Pseudoklassenselektoren
Vorwort Wenn CSS die Grundfertigkeit der Front-En...