This article has shared the specific code for vue to realize the effect of magnifying glass for your reference. The specific content is as follows
Realize the effect of Taobao-like magnifying glass
A front-end novice, I have been studying vue recently. I have no time to go shopping on Taobao and want to try making a magnifying glass. Although I did it, some of the problems I couldn’t solve. I searched around but couldn’t find a satisfactory answer. I was very upset and hoped that a big guy could help me answer them. Thank you
Steps and ideas
- Display space for the original image (left)You can change the img that displays the original image to canvas to protect the image
- Displays an enlarged indication area when following the mouse movement (mouse layer cover top)
- Select the enlarged display space (right) in the display layer cover area
HTML part
<template> <div> <div class="left"> <img class="leftImg" src="../../public/image/" alt=""> <!-- Mouse layer cover --> <div v-show="topShow" class="top" :style="topStyle"></div> <!-- The top layer covers the entire original image space --> <div class="maskTop" @mouseenter="enterHandler" @mousemove="moveHandler" @mouseout="outHandler"></div> </div> <div v-show="rShow" class="right"> <img :style="r_img" class="rightImg" src="../../public/image/" alt=""> </div> </div> </template>
CSS part
<style scoped>
/* Zoom in picture, position the upper left corner to (0,0) */
.rightImg {
display: inline-block;
width: 800px;
height: 800px;
position: absolute;
top: 0;
left: 0;
}
/* The picture space on the right area */
.right {
margin-left: 412px;
width: 400px;
height: 400px;
border: 1px solid red;
position: relative;
overflow: hidden;
}
/* A top layer of cover */
.maskTop {
width: 400px;
height: 400px;
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
/* Layer cover, position 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 of the original image */
.leftImg {
width: 400px;
height: 400px;
display: inline-block;
}
/* The container of the original image */
.left {
width: 400px;
height: 400px;
border: 1px solid teal;
float: left;
position: relative;
}
</style>
JS implementation part
<script>
export default {
data() {
return {
topStyle:{transform:''},
r_img: {},
topShow:false,
rShow:false
}
},
methods : {
// Mouse enters the original space function enterHandler() {
// Display of layer cover and enlarged space = true
= true
},
// Mouse move function moveHandler(event) {
// Mouse coordinate position let x =
let y =
// The coordinate position of the upper left corner of the layer cover and limit it: it cannot exceed the upper left corner of the original image area let topX = (x-100) < 0 ? 0:(x-100)
let topY = (y-100) < 0 ? 0:(y-100)
// The position of the layer cover is restricted again to ensure that the layer cover can only be in the original area space if(topX>200) {
topX = 200
}
if(topY>200) {
topY = 200
}
// Move control via transform = `translate(${topX}px,${topY}px)`
this.r_img.transform = `translate(-${2*topX}px,-${2*topY}px)`
},
// Mouse out function outHandler() {
// The hiding of the control layer cover and enlarged space = false
= false
}
}
}
</script>
question
Originally, I added three mouse events to the original image container left, but problems kept occurring
1. I added a transparent mask covering the mouse area to allow this magnifying glass to be fully implemented. If I do not add this maskTop layer cover, the mouse mask will not move with the mouse when my mouse enters the original image area space, and will also "vibrate" at a high frequency when the mouse moves. The space on the right enlarged area does not smoothly follow the movement.
2. If the maskTop layer cover is not added, when my mouse moves into the original image area space, the mousemove mouse movement event is only executed once, as it seems that it is because the mouse layer cover blocks it.
3. I have tried dynamically determining the initial position of the mouse layer cover and put it in the mouseenter event. As a result, the mouseenter event was executed many times, as if it had become a mousemove event.
I have seen other cases of magnifying glasses, but they don’t need to add masktop, the top-level cover, and I hope that there will be passers-by to help solve the problem.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.