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
Verwendung von Vue-Filtern und Probleme bei der Zeitstempelkonvertierung
Inhaltsverzeichnis 1. Das Konzept schnell erkenne...
Vues Render-Funktion
Inhaltsverzeichnis 1. Knoten, Bäume und virtuelle...
Prioritätsanalyse von und/oder Abfragen in MySQL
Dies ist ein Problem, das leicht übersehen wird. ...
JavaScript zum Erzielen eines einfachen Drag-Effekts
In diesem Artikel wird der spezifische JavaScript...
Schreiben eines Schere-Stein-Papier-Spiels in JavaScript
In diesem Artikel finden Sie den spezifischen Cod...
Ein umfassendes Verständnis der funktionalen Komponenten von Vue.js
Inhaltsverzeichnis Vorwort Funktionale React-Komp...
Teilen Sie 20 hervorragende Beispiele für Webformular-Design
Sophie Hardach Kai von Clyde Quay 37 Ost Seifenkis...
Detaillierte Erklärung des Nginx Reverse-Proxy-Beispiels
1. Reverse-Proxy-Beispiel 1 1. Erzielen Sie den E...
Eine kurze Diskussion über das Prinzip der bidirektionalen Datenbindung von React
Inhaltsverzeichnis Was ist bidirektionale Datenbi...
Vue-Anpassungsmethode für Großbildschirme
In diesem Artikelbeispiel wird der spezifische Co...
Beispielcode zur Implementierung mobiler Expansions- und Collapse-Effekte mit reinem CSS3
Dieser Artikel stellt den Beispielcode zur Implem...
So installieren Sie nginx schnell unter Windows und konfigurieren es für den automatischen Start
Inhaltsverzeichnis 1. Nginx-Installation und Star...
Speicher-Engine und Protokollbeschreibung basierend auf MySQL (ausführliche Erklärung)
1.1 Einführung in Speicher-Engines 1.1.1 Dateisys...
So erstellen Sie ein Apache-Image mit Dockerfile
Inhaltsverzeichnis 1. Docker-Image 2. Erstellen S...
So ändern Sie den Speicherort des MySQL-Datenbankverzeichnisses unter Linux (CentOS)
So ändern Sie den Speicherort des MySQL-Datenbank...