js实现放大镜效果
实现放大镜效果的基本思路
放大镜效果通常用于电商网站展示商品细节。核心原理是通过监听鼠标移动事件，同步显示放大区域的图像。
HTML结构
创建一个包含原图和放大镜区域的容器：
<div class="magnifier-container">
<img src="original.jpg" id="originalImg">
<div class="magnifier"></div>
</div>CSS样式
设置基本样式和放大镜外观：
.magnifier-container {
position: relative;
width: 500px;
height: 500px;
}
#originalImg {
width: 100%;
height: auto;
}
.magnifier {
position: absolute;
width: 150px;
height: 150px;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
background-repeat: no-repeat;
display: none;
pointer-events: none;
}JavaScript实现
监听鼠标事件并计算放大区域：
const originalImg = document.getElementById('originalImg');
const magnifier = document.querySelector('.magnifier');
const zoomLevel = 2; // 放大倍数
originalImg.addEventListener('mousemove', (e) => {
magnifier.style.display = 'block';
const {left, top, width, height} = originalImg.getBoundingClientRect();
const x = e.pageX - left;
const y = e.pageY - top;
// 限制放大镜不超出图像边界
const magnifierWidth = magnifier.offsetWidth;
const magnifierHeight = magnifier.offsetHeight;
let posX = x - magnifierWidth/2;
let posY = y - magnifierHeight/2;
posX = Math.max(0, Math.min(posX, width - magnifierWidth));
posY = Math.max(0, Math.min(posY, height - magnifierHeight));
magnifier.style.left = `${posX}px`;
magnifier.style.top = `${posY}px`;
// 计算放大背景位置
const bgX = -posX * zoomLevel;
const bgY = -posY * zoomLevel;
magnifier.style.backgroundImage = `url(${originalImg.src})`;
magnifier.style.backgroundSize = `${width * zoomLevel}px ${height * zoomLevel}px`;
magnifier.style.backgroundPosition = `${bgX}px ${bgY}px`;
});
originalImg.addEventListener('mouseleave', () => {
magnifier.style.display = 'none';
});高级优化方案
对于更流畅的体验，可以预加载放大后的图像：
const zoomImg = new Image();
zoomImg.src = 'large-image.jpg';
// 在mousemove事件中使用zoomImg代替originalImg
magnifier.style.backgroundImage = `url(${zoomImg.src})`;响应式处理
添加窗口大小变化时的调整：
window.addEventListener('resize', () => {
const {width, height} = originalImg.getBoundingClientRect();
magnifier.style.backgroundSize = `${width * zoomLevel}px ${height * zoomLevel}px`;
});性能优化
使用requestAnimationFrame优化动画性能：
let lastX = 0, lastY = 0;
let rafId = null;
const updateMagnifier = () => {
const {left, top, width, height} = originalImg.getBoundingClientRect();
const bgX = -lastX * zoomLevel;
const bgY = -lastY * zoomLevel;
magnifier.style.backgroundPosition = `${bgX}px ${bgY}px`;
rafId = null;
};
originalImg.addEventListener('mousemove', (e) => {
// ...其他代码
lastX = posX;
lastY = posY;
if (!rafId) {
rafId = requestAnimationFrame(updateMagnifier);
}
});这些代码实现了一个基础的放大镜效果，可以根据实际需求调整放大倍数、放大镜形状和尺寸等参数。
