Vue3.0 implements the magnifying glass effect case study

The effect to be achieved is: fixed zoom in twice, when the mouse enters the left picture area, the mask layer is displayed, when leaving, the mask layer is hidden.

Cursor in CSS

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

How to achieve the mouse following effect: (child is absolutely the same as father) absolute positioning + modify top, left to control movement

In @vueuse, there is a tool method: useMouseInElement

<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>
 
<script>
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'
 
export default {
  setup() {
    const target = ref(null)
 
    const { x, y, isOutside } = useMouseInElement(target)
 
    return { x, y, isOutside }
  }
}
</script>

This is the usage on the VueUse official website. Finally, don't forget to return { target }. I didn't return target at the beginning, so the values ​​of x, y, and isOutside were 0, 0, and false, which were not changing values.

The relationship between the mouse position and the mask position:

 <div class="layer" :style="layerStyle"></div> //This is the mask layer setup(){ //Here is the code to implement mouse following const layerStyle = reactive({
      top: '0px',
      left: '0px'
    })
    // Monitor the changes of three values, watch the first parameter with array watch([elementX, elementY, isOutside], () => {
      // layerStyle.left = elementX.value / 2 + 'px'
      // layerStyle.top = elementY.value / 2 + 'px'
      let top = elementY.value - 100
      let left = elementX.value - 100
 
      // Assign position to mask element if (top < 0) top = 0
      if (top > 200) top = 200
      if (left < 0) left = 0
      if (left > 200) left = 200
      layerStyle.top = top + 'px'
      layerStyle.left = left + 'px'
    })
    return { elementX, elementY, isOutside, target, layerStyle }
 
}

The mask area cannot exceed the parent box on the left. There are two lines of code above that I commented out. Why can't I write them together? Because when I need to add judgment later, I will find that when I add px after the judgment, you will find that you don't know where to start. If you write them separately like above, top and left are just a value. After the calculation is completed, add the unit.

How to achieve the amplification effect:

There is a background-size attribute in the css style. The first parameter refers to the width and the second parameter refers to the height. You can enlarge the image

The original size is 400*400, so if it is doubled, it will be 800*800

The background-position-x and background-position-y in the CSS style can enlarge the specified area

About background-position: x,y The first value is the horizontal position and the second value is the vertical position

Here is the div on the right with the zoom effect:

 <div class="large" :style="{ backgroundImage:`url(${images[current]})`,...largeStyle }"></div> 

This is the css code, you can refer to it:

 .large {
   position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-repeat: no-repeat;
    background-size: 800px 800px;
    background-color: #f8f8f8;
 }

Finally: When the mouse moves out of the left box area, the mask is hidden and the enlarged box on the right is also hidden

The isOutSide property of useMouseInElement can detect whether it exceeds the monitoring element, just use v-show="!isOutSide"

This is the end of this article about the case study of Vue3.0’s own magnifying glass effect. For more relevant content about Vue3.0’s magnifying glass effect, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!