截取自项目某部分

HTML部分

CSS部分

/* 放大镜效果 */
.maskTop {
width: 400px;
height: 400px;
position: absolute;
z-index: 1;
top: 0;
left: 0;
cursor: move;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: yellow;
border: 1px solid #ccc;

JS部分

export default {
components: { nav },
name: "productDeatil",
data() {
return {
currentActive: "",
r_img: {},
text0: [0, 1, 1, 11, ,],
text: [1, 1, 1, 1, 1, 1],
isShow: 0,
maskShow: 0,
topStyle: { },
// currentX: 0,
// currentY: 0,
};
},
methods: {
//鼠标经过图片，显示详细图片以及小图片出现边框
pdEnter(index) {
this.currentActive = index;
},
bigShow() {
this.isShow = !this.isShow;
this.maskShow = !this.maskShow;
},
bigLeave() {
this.isShow = !this.isShow;
this.maskShow = !this.maskShow;
},
move($event) {
let x = event.offsetX;
let y = event.offsetY;
let topX = x - 100 < 0 ? 0 : x - 100;
let topY = y - 100 < 0 ? 0 : y - 100;
if (topX > 200) {
topX = 200;
}
if (topY > 200) {
topY = 200;
}
// this.currentX = X;
// this.currentY = Y;
// console.log(this.currentX);
this.topStyle.transform = translate(${topX}px,${topY}px);
this.r_img.transform = translate(-${500/380 * topX}px,-${500/380 * topY}px);
},
},
};

vue实现放大镜效果

原文：https://www.cnblogs.com/YoungP7/p/14810703.html