let rightBox = this.$refs.right;
// 右边大图的位置
let maxImg = this.$refs.maxImg;
// 大图片的移动的最大距离
let imgMaxX = maxImg.offsetWidth - rightBox.offsetWidth;
let imgMaxY = maxImg.offsetHeight - rightBox.offsetHeight;
// 放大镜图片移动的距离
let imgX = maskX * (imgMaxX / maxX);
let imgY = maskY * (imgMaxY / maxY);
maxImg.style.left = -imgX + "px";
maxImg.style.top = -imgY + "px";
},
},
};
### 原生js版本放大镜
<div class="goods">
<img src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg" alt="" />
<div class="mask"></div>
</div>
<div class="big" style="display: none">
<img src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg" alt="" />
</div>