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 fügen Sie img-Bilder in Vue-Seiten ein
Wenn wir HTML lernen, führt das Bild-Tag <img&...
So stellen Sie Dienste in Windows Server 2016 bereit (Grafisches Tutorial)
Einführung Wenn eine große Anzahl an Systemen ins...
Bewertungsregeln von YSlow, einem von Yahoo entwickelten Webseiten-Bewertungs-Plugin
YSlow ist ein von Yahoo USA entwickeltes Plug-in ...
JS+CSS zur Realisierung einer dynamischen Uhr
In diesem Artikelbeispiel wird der spezifische Co...
Untersuchung des Problems der Flip-Navigation mit geneigter Maus
In diesem Artikel analysieren wir als Beispiel die...
Wird der veraltete Docker durch Podman ersetzt?
Das Kubernetes-Team hat vor Kurzem angekündigt, d...
So erhalten Sie den Inhalt einer TXT-Datei über FileReader in JS
Inhaltsverzeichnis JS erhält den Inhalt der TXT-D...
JavaScript zur Implementierung des Countdowns für den SMS-Versand
In diesem Artikel wird der spezifische JavaScript...
Wie MLSQL Stack das Stream-Debugging vereinfacht
Vorwort Ein Klassenkamerad untersucht die Streami...
So implementieren Sie Lastenausgleich in MySQL
Vorwort MySQL ist ein schnelles, leistungsstarkes...
Prinzip der Ereignisdelegierung in JavaScript
Inhaltsverzeichnis 1. Was ist Eventdelegation? 2....
Docker fügt eine Brücke hinzu und legt den IP-Adressbereich fest
Ich weiß nicht, ob es daran liegt, dass die Binär...
Detaillierte Erklärung der Verwendung von 5 verschiedenen Werten der CSS-Position
Die Position-Eigenschaft Die Positionseigenschaft...
Zwei Möglichkeiten, das Löschen des Eingabetext-Eingabecaches in HTML zu verhindern
Die meisten Browser speichern die Eingabewerte st...
So ändern Sie die inländische Imagequelle für Docker
Konfigurieren Sie den Beschleuniger für den Docke...