Vue realisiert den Produktlupeneffekt

<Vorlage>
  <div>
    <div Klasse="links">
      <img class="leftImg" src="../../src/assets/curry.jpg" alt="" />
      <!-- Maus-Layer-Abdeckung-->
      <div v-show="topShow" Klasse="top" :style="topStyle"></div>
      <!-- Die oberste Ebene deckt den gesamten ursprünglichen Bildbereich mit einer transparenten Ebene ab -->
      <div
        Klasse="MaskeOberteil"
        @mouseenter="EingabeHandler"
        @mousemove="BewegungsHandler"
        @mouseout="outHandler"
      ></div>
    </div>
    <div v-show="rShow" Klasse="rechts">
      <Bild
        :Stil="r_img"
        Klasse="rechtesBild"
        quelle="../../quelle/assets/curry.jpg"
        alt=""
      />
    </div>
  </div>
</Vorlage>

<Stilbereich>
/* Vergrößere das Bild und positioniere die obere linke Ecke auf (0,0) */
.rightImg {
  Anzeige: Inline-Block;
  Breite: 800px;
  Höhe: 800px;
  Position: absolut;
  oben: 0;
  links: 0;
} /* Bildzoombereich rechts*/
.Rechts {
  Rand links: 412px;
  Breite: 400px;
  Höhe: 400px;
  Rand: 1px durchgehend rot;
  Position: relativ;
  Überlauf: versteckt;
} /* Eine Maske der obersten Ebene */
.maskTop {
  Breite: 400px;
  Höhe: 400px;
  Position: absolut;
  Z-Index: 1;
  oben: 0;
  links: 0;
} /* Ebenenmaske, positioniere die obere linke Ecke auf (0,0) */
.Spitze {
  Breite: 200px;
  Höhe: 200px;
  Hintergrundfarbe: Hellkoralle;
  Deckkraft: 0,4;
  Position: absolut;
  oben: 0;
  links: 0;
} /* Anzeige des Originalbildes */
.leftImg {
  Breite: 400px;
  Höhe: 400px;
  Anzeige: Inline-Block;
} /* Container des Originalbildes */
.links {
  Breite: 400px;
  Höhe: 400px;
  Rand: 1px, durchgehend blaugrün;
  schweben: links;
  Position: relativ;
}
</Stil>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      topStyle: { transform: "" },
      r_img: {},
      topShow: false,
      rShow: false,
    };
  },
  Methoden: {
    // Die Maus betritt den ursprünglichen Bildraum Funktion enterHandler() {
      // Anzeige der Ebenenmaske und des vergrößerten Bereichs this.topShow = true;
      dies.rShow = wahr;
    },
    // Mausbewegungsfunktion moveHandler(event) {
      // Koordinatenposition der Maus let x = event.offsetX;
      sei y = Ereignis.OffsetY;
      // Die Koordinatenposition der oberen linken Ecke der Ebenenmaske und deren Begrenzung: Sie darf die obere linke Ecke des ursprünglichen Bildbereichs nicht überschreiten. let topX = x – 100 < 0? 0: x – 100;
      sei topY = y – 100 < 0? 0: y – 100;
      // Die Position der Ebenenmaske nochmals einschränken, so dass die Ebenenmaske nur dann innerhalb des originalen Bildbereichs liegen kann, wenn (topX > 200) {
        obenX = 200;
      }
      wenn (topY > 200) {
        obenY = 200;
      }
      // Steuerung durch Transformation verschieben this.topStyle.transform = `translate(${topX}px,${topY}px)`;
      this.r_img.transform = `übersetzen(-${2 * topX}px,-${2 * topY}px)`;
    },
    // Maus raus Funktion outHandler() {
      //Steuern Sie das Ausblenden der Ebenenabdeckung und des Vergrößerungsbereichs. this.topShow = false;
      dies.rShow = falsch;
    },
  },
};
</Skript>