js实现放大
JavaScript 实现放大功能
使用 CSS transform 实现放大效果
通过修改元素的 transform 属性实现放大效果，结合 transition 添加平滑动画。
const element = document.getElementById('target');
element.addEventListener('mouseenter', () => {
element.style.transform = 'scale(1.2)';
element.style.transition = 'transform 0.3s ease';
});
element.addEventListener('mouseleave', () => {
element.style.transform = 'scale(1)';
});动态修改 width/height 实现放大
直接调整元素的宽高属性，适合需要精确控制尺寸的场景。
const box = document.querySelector('.box');
box.addEventListener('click', () => {
const currentWidth = parseInt(getComputedStyle(box).width);
box.style.width = `${currentWidth * 1.5}px`;
box.style.height = `${currentWidth * 1.5}px`;
});使用 Canvas 实现局部放大
适用于图片局部放大展示，需要计算鼠标位置和绘制区域。
const canvas = document.getElementById('zoomCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img,
x - 20, y - 20, 40, 40, // 源图像区域
0, 0, canvas.width, canvas.height // 画布区域
);
});
};使用第三方库实现高级放大
推荐使用 zoom.js 或 medium-zoom 等库快速实现专业效果。
// 使用 medium-zoom 示例
import mediumZoom from 'medium-zoom';
mediumZoom('[data-zoomable]', {
margin: 24,
background: '#000',
});响应式放大实现
结合视口单位实现响应式放大效果，适应不同屏幕尺寸。
window.addEventListener('resize', () => {
const scaleValue = Math.min(
window.innerWidth / 1024,
window.innerHeight / 768,
1.5
);
document.getElementById('responsiveBox').style.transform = `scale(${scaleValue})`;
});性能优化建议
- 使用
will-change: transform提升动画性能 - 对频繁触发的放大操作进行防抖处理
- 考虑使用
transform-origin控制放大基准点 - 对移动设备添加触摸事件支持
以上方法可根据具体需求组合使用，CSS transform 方案性能最佳，Canvas 方案适合特殊效果，第三方库可快速实现复杂功能。
