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.

Umsetzungsprinzip

Zunä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:

Vue realisiert den Produktlupeneffekt
Beispielcode einer in Vue3 gekapselten Lupenkomponente
Vue3 realisiert den Bildlupeneffekt
Vue implementiert die Lupenfunktion der Produktdetailseite
Vue implementiert einen einfachen Lupeneffekt
Vue implementiert ein Suchfeld mit einer Lupe
Vue3.0 Handschrift-Lupeneffekt
Vue implementiert Lupeneffekt
Ein handgeschriebener Vue-Lupeneffekt
Vue3 kapselt die Lupeneffektkomponente der Jingdong-Produktdetailseite

<<: 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

SSH-Portweiterleitung, lokale Portweiterleitung, Remote-Portweiterleitung, dynamische Portweiterleitungsdetails

Detaillierte Erläuterung der Idee zur Implementierung dynamischer Effekte für die Änderung der Textfüllungsfarbe im Liedtext mit CSS3

Artikel

Verwenden Sie nginx, um Bildgrößen dynamisch zu konvertieren und Miniaturansichten zu generieren

Vue implementiert den Lupeneffekt beim Tab-Umschalten

Umsetzungsprinzip

SSH-Portweiterleitung, lokale Portweiterleitung, Remote-Portweiterleitung, dynamische Portweiterleitungsdetails

So simulieren Sie Netzwerkpaketverlust und -verzögerung in Linux

IE8 Beta 1 hat zwei Bereiche, die Ihre Aufmerksamkeit erfordern

Detaillierte Erläuterung der Idee zur Implementierung dynamischer Effekte für die Änderung der Textfüllungsfarbe im Liedtext mit CSS3

Verwenden Sie nginx, um Bildgrößen dynamisch zu konvertieren und Miniaturansichten zu generieren

WiFi-Entwicklung | Einführung in die WiFi-Wireless-Technologie

Detailliertes Beispiel für die Verwendung von MySQL-Triggern

Detaillierte Erklärung gängiger Docker-Befehle

Detaillierte Erläuterung der Ereignisschleifen-Ereigniswarteschlange von js im Browser

Lösung für das Problem, dass eine Linux-Änderung der MySQL-Konfiguration nicht wirksam wird

Artikel empfehlen

Designtheorie: Warum suchen wir am falschen Ort?

Mehrere Möglichkeiten zur Lösung von CSS-Stilkonflikten (Zusammenfassung)

Tiefgreifendes Verständnis des Linux-Lastausgleichs LVS

So verbinden Sie Django 2.2 mit einer MySQL-Datenbank

Diskussion über die numerische Begrenzung des OL-Elements im HTML-Dokument

Detaillierte Analyse der Prinzipien und der Verwendung von MySQL-Ansichten

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Verwenden Sie Standard-DL-, DT- und DD-Tags, um Tabellenlisten zu verwerfen

So schreiben Sie asynchrone Aufgaben in modernem JavaScript

Vue implementiert Funktionen zum Hoch- und Herunterladen von Dateien

So installieren und konfigurieren Sie einen FTP-Server in CentOS8.0

Eine kurze Erläuterung der Manifestation und Wertauswahlmethode von innodb_autoinc_lock_mode

JavaScript implementiert die H5-Goldmünzenfunktion (Beispielcode)

js implementiert das Ein- und Ausblenden von Inhalten mit der Maus über die Karte

Beispiele für die Verwendung von MySQL-Abdeckungsindizes