Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

I. Preface:

In this heyday of e-commerce era, when various live broadcast goods or independent shopping, our cognition and understanding of goods, further check the details, we found that our goods can be viewed in a magnifying glass, so we used the front-end technology Vue framework to write a function like a magnifying glass

Two, implementation ideas:

For the display space of the original image (left), you can change the display space of the original image from img to Canvas to protect the image line. When moving with the mouse, the enlarged indicator area (mouse layer top) will be displayed, and the enlarged display space (right) will be selected in the display layer cover area.

3. Effect display

Four, the specific implementation of the logic code

Template (remember to change the image path)

<template>
  <div>
    <div class="left">
      <img class="leftImg" src=".. /.. /src/assets/curry.jpg" alt="" />
      <! -- Mouse mask -->
      <div v-show="topShow" class="top" :style="topStyle"></div>
      <! -- Transparent cover covering the entire original space on the top layer -->
      <div
        class="maskTop"
        @mouseenter="enterHandler"
        @mousemove="moveHandler"
        @mouseout="outHandler"
      ></div>
    </div>
    <div v-show="rShow" class="right">
      <img
        :style="r_img"
        class="rightImg"
        src=".. /.. /src/assets/curry.jpg"
        alt=""
      />
    </div>
  </div>
</template>
Copy the code

style css

<style scoped>
/* zoom in, position the top left corner to (0,0) */
.rightImg {
  display: inline-block;
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
} /* Zoom in space */
.right {
  margin-left: 412px;
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
} /* A top layer */
.maskTop {
  width: 400px;
  height: 400px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
} /* layer mask, positioning the upper left corner to (0,0) */
.top {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
} /* Display the original image */
.leftImg {
  width: 400px;
  height: 400px;
  display: inline-block;
} /* The original container */
.left {
  width: 400px;
  height: 400px;
  border: 1px solid teal;
  float: left;
  position: relative;
}
</style>
Copy the code

Core js script

<script>
export default {
  data() {
    return {
      topStyle: { transform: "" },
      r_img: {},
      topShow: false.rShow: false}; },methods: {
    // Mouse over the original space function
    enterHandler() {
      // Layer mask and enlarge space display
      this.topShow = true;
      this.rShow = true;
    },
    // Mouse movement function
    moveHandler(event) {
      // The mouse position
      let x = event.offsetX;
      let y = event.offsetY;
      // The top left corner of the mask, and limit it: cannot go beyond the top left corner of the original image area
      let topX = x - 100 < 0 ? 0 : x - 100;
      let topY = y - 100 < 0 ? 0 : y - 100;
      // Again restrict the position of the layer mask to ensure that the layer mask can only be in the original image space
      if (topX > 200) {
        topX = 200;
      }
      if (topY > 200) {
        topY = 200;
      }
      // Use transform to control movement
      this.topStyle.transform = `translate(${topX}px,${topY}px)`;
      this.r_img.transform = `translate(-The ${2 * topX}px,-The ${2 * topY}px)`;
    },
    // Mouse over the function
    outHandler() {
      // Control layer hood with magnifying space hiding
      this.topShow = false;
      this.rShow = false; ,}}}; </script>Copy the code

Fifth, summary thinking

I originally added three mouse events to the original image container left, which kept causing problems

1. The magnifying glass can be fully realized only when I add a transparent layer mask maskTop covering the mouse area. Without the maskTop layer mask, the mouse layer mask will not move with the mouse when I enter the original area, but will vibrate with high frequency when the mouse moves. The enlarged area on the right does not move smoothly

2. If the maskTop mask is not added, the Mousemove mouse movement event is only executed once when I mouse over the area of the original image, which seems to be blocked by the mouse mask

3. Before, I tried to dynamically determine the initial position of the mouse mask by placing it in the MouseEnter event. As a result, the MouseEnter event executed an exception many times, just like turning into a Mousemove event. But they do not need to add masktop this top layer cover, expect to have a passing big guy to help solve the problem