前端实现商品图片放大镜效果

在一些商品网站的开发中, 都会用到一种交互效果就是放大镜效果, 那么怎么来实现呢?
其实这里需要了解三个鼠标事件, 比如悬停移出和移动
再加上我们的样式, 我们根据绝对定位和相对定位实时计算即可
我给大家提前写好了样式

大概的结构是这样的

接下来, 我们先获取一下我们需要的元素
let imgLeftBox = document.querySelector(“.img-left-box”); //原图
let imgRightBox = document.querySelector(“.img-right-box”); //大图
let magnifier = document.querySelector(“.magnifier”); //放大镜
let img = document.querySelector(“.image”); // 需要放大的
我们先来思考一下, 什么时候我们的托块才会展示, 默认情况下是需要隐藏的
是不是我们鼠标移入到原图区域的时候才会展示?
imgLeftBox.onmouseenter = () => {
magnifier.className = ‘magnifier m’;
}
我们上面设置的类名m是用于展示的
display: block;
现在, 我们看看效果

我们可以看到当我们鼠标移入的时候, 我们的托块也加上了类名m
我们再来思考一下, 是不是当鼠标移入的时候, 我们还需要展示大图的盒子?
imgLeftBox.onmouseenter = () => {
magnifier.className = ‘magnifier m’;
imgRightBox.className = ‘img-right-box m’
}
这样, 我们的盒子也就出来了

接下来, 我们考虑一下如何移除类名m, 是不是在我们鼠标移出原图盒子的时候, 我们需要将托块和大图块都隐藏掉
imgLeftBox.onmouseleave = () => {
magnifier.className = ‘magnifier’;
imgRightBox.className = ‘img-right-box’
}
这样我们就算完成一半了
接下来, 我们做一下实时计算
imgLeftBox.onmousemove = (event) => {
let event = event || window.event;
console.log(event)
};
先来打印一下事件对象有没有我们需要的东西
我们可以看到pageX和pageY, 就可以索引当前鼠标在当前文档的位置
通过减去原图的左右偏移量和托块的中间坐标就可以获得当前托块的定位坐标
const x = events.pageX – imgLeftBox.offsetLeft – magnifier.offsetWidth / 2;
const y = events.pageY – imgLeftBox.offsetTop – magnifier.offsetHeight / 2;
我们给托块这只一下定位坐标
magnifier.style.left = x + “px”;
magnifier.style.top = y + “px”;
我们可以看到, 当前定位如果为负值就会出去, 我们需要考虑一下临界情况

if(x < 0) { x = 0; } if(y < 0) { y = 0; } if (x > imgLeftBox.offsetWidth – magnifier.offsetWidth) {
x = imgLeftBox.offsetWidth – magnifier.offsetWidth;
}
if (y > imgLeftBox.offsetHeight – magnifier.offsetHeight) {
y = imgLeftBox.offsetHeight – magnifier.offsetHeight;
}
最后, 我们根据鼠标在原图的位置, 动态调整大图的位置即可
img.style.left = -x * 2 + “px”;
img.style.top = -y * 2 + “px”;
我们看下效果

今天, 我们就实现到这里
我们下期见