Vue3.0 implementiert die Fallstudie zum Lupeneffekt

Der zu erzielende Effekt ist: Festes Vergrößern auf die Hälfte, beim Betreten des linken Bildbereichs wird die Maskenebene eingeblendet, beim Verlassen wird die Maskenebene ausgeblendet.

Cursor in CSS

https://www.runoob.com/cssref/pr-class-cursor.html

So erzielen Sie mit der Maus folgenden Effekt: (Kind ist absolut dasselbe wie Vater) Absolute Positionierung + Ändern der Bewegung oben und links

In @vueuse gibt es eine Toolmethode: useMouseInElement

<Vorlage>
  <div ref="Ziel">
    <h1>Hallo Welt</h1>
  </div>
</Vorlage>
 
<Skript>
importiere { ref } von 'vue'
importiere { useMouseInElement } von '@vueuse/core'
 
Standard exportieren {
  aufstellen() {
    const Ziel = ref(null)
 
    const { x, y, istAußen } = useMouseInElement(Ziel)
 
    return { x, y, istAußen}
  }
}
</Skript>

Dies ist die Verwendung auf der offiziellen VueUse-Website. Vergessen Sie nicht, {target} zurückzugeben. Ich habe target am Anfang nicht zurückgegeben, daher waren die Werte von x, y und isOutside 0, 0 und false, was keine Werteänderung war.

Die Beziehung zwischen der Mausposition und der Maskenposition:

 <div class="layer" :style="layerStyle"></div> //Dies ist die Maskenebene setup(){ //Hier ist der Code zur Implementierung der Mausverfolgung const layerStyle = reactive({
      oben: '0px',
      links: '0px'
    })
    // Überwachen Sie die Änderungen von drei Werten, beobachten Sie den ersten Parameter mit dem Array watch([elementX, elementY, isOutside], () => {
      // layerStyle.left = elementX.value / 2 + 'px'
      // layerStyle.top = elementY.value / 2 + 'px'
      let top = elementY.Wert - 100
      let left = elementX.Wert - 100
 
      // Position dem Maskenelement zuweisen, wenn (oben < 0) oben = 0
      wenn (oben > 200) oben = 200
      wenn (links < 0) links = 0
      wenn (links > 200) links = 200
      layerStyle.top = oben + 'px'
      layerStyle.left = links + 'px'
    })
    return { elementX, elementY, istAußen, Ziel, Layerstil }
 
}

Der Maskenbereich darf das übergeordnete Feld links nicht überschreiten. Oben gibt es zwei Codezeilen, die ich auskommentiert habe. Warum kann ich sie nicht zusammen schreiben? Denn wenn ich später eine Beurteilung hinzufügen muss, werde ich feststellen, dass ich nicht weiß, wo ich anfangen soll, wenn ich nach der Beurteilung px hinzufüge. Wenn Sie sie wie oben separat schreiben, sind oben und links nur ein Wert. Fügen Sie nach Abschluss der Berechnung die Einheit hinzu.

So erzielen Sie den Verstärkungseffekt:

Es gibt ein background-size-Attribut im CSS-Stil. Der erste Parameter bezieht sich auf die Breite und der zweite Parameter auf die Höhe. Sie können das Bild vergrößern

Die Originalgröße beträgt 400*400, bei einer Verdoppelung ergibt sich also eine Größe von 800*800

Die background-position-x und background-position-y im CSS-Style können den angegebenen Bereich vergrößern

Über Hintergrundposition: x,y Der erste Wert ist die horizontale Position und der zweite Wert ist die vertikale Position

Hier ist das Div rechts mit dem Zoomeffekt:

 <div Klasse="groß" :style="{ Hintergrundbild:`url(${images[current]})`,...großerStil }"></div> 

Dies ist der CSS-Code, auf den Sie verweisen können:

 .groß {
   Position: absolut;
    oben: 0;
    links: 412px;
    Breite: 400px;
    Höhe: 400px;
    Kastenschatten: 0 0 10px rgba(0,0,0,0,1);
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundgröße: 800px 800px;
    Hintergrundfarbe: #f8f8f8;
 }

Schließlich: Wenn die Maus aus dem linken Boxbereich herausbewegt wird, wird die Maske ausgeblendet und die vergrößerte Box auf der rechten Seite wird ebenfalls ausgeblendet

Die Eigenschaft isOutSide von useMouseInElement kann erkennen, ob das Überwachungselement überschritten wird. Verwenden Sie dazu einfach v-show="!isOutSide".

Dies ist das Ende dieses Artikels über die Fallstudie zum Lupeneffekt von Vue3.0. Weitere relevante Inhalte zum Lupeneffekt von Vue3.0 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!