js实现图片放大
实现图片放大功能
使用JavaScript实现图片放大功能可以通过多种方式完成，以下是几种常见的实现方法：
使用CSS和JavaScript结合实现
通过CSS的transform属性配合JavaScript事件监听实现放大效果：
const image = document.getElementById('zoomImage');
image.addEventListener('mousemove', (e) => {
const { left, top, width, height } = image.getBoundingClientRect();
const x = (e.clientX - left) / width * 100;
const y = (e.clientY - top) / height * 100;
image.style.transformOrigin = `${x}% ${y}%`;
image.style.transform = 'scale(2)';
});
image.addEventListener('mouseleave', () => {
image.style.transform = 'scale(1)';
});使用第三方库（如Zoom.js）
引入Zoom.js等专门处理图片放大的库可以快速实现功能：
<script src="https://cdn.jsdelivr.net/npm/zoom-vanilla.js/dist/zoom-vanilla.min.js"></script>
<img src="image.jpg" data-action="zoom">创建放大镜效果
实现类似放大镜的局部放大效果：
const img = document.getElementById('sourceImage');
const lens = document.createElement('div');
lens.className = 'img-magnifier-glass';
document.body.appendChild(lens);
img.addEventListener('mousemove', moveLens);
lens.addEventListener('mousemove', moveLens);
img.addEventListener('mouseout', () => lens.style.display = 'none');
function moveLens(e) {
lens.style.display = 'block';
const pos = getCursorPos(e);
const x = pos.x - (lens.offsetWidth / 2);
const y = pos.y - (lens.offsetHeight / 2);
lens.style.left = `${x}px`;
lens.style.top = `${y}px`;
lens.style.backgroundImage = `url('${img.src}')`;
lens.style.backgroundSize = `${img.width * 2}px ${img.height * 2}px`;
lens.style.backgroundPosition = `-${x * 2}px -${y * 2}px`;
}使用CSS的hover伪类实现简单放大
纯CSS方案适合简单的交互需求：
.zoomable-image {
transition: transform 0.3s;
}
.zoomable-image:hover {
transform: scale(1.5);
}注意事项
- 对于大尺寸图片，建议预加载或使用缩略图+原图的方式优化性能
- 移动端设备需要考虑触摸事件（touchstart/touchmove）的支持
- 放大效果应该限制在可视区域内，避免页面布局混乱
- 高倍率放大时图片可能失真，建议使用高质量原图
