当前位置：首页 > JavaScript

js实现图片的放大缩小

2026-03-01 07:27:58JavaScript

使用 CSS transform 实现缩放

通过修改 CSS 的 transform: scale() 属性实现图片缩放效果。这种方式性能较好，适合简单的交互需求。

const img = document.querySelector('img');
let currentScale = 1;

function zoom(factor) {
    currentScale *= factor;
    img.style.transform = `scale(${currentScale})`;
}

// 放大
document.getElementById('zoomIn').addEventListener('click', () => zoom(1.2));
// 缩小
document.getElementById('zoomOut').addEventListener('click', () => zoom(0.8));

通过修改 width/height 属性实现

直接修改图片的宽高属性，适合需要精确控制像素尺寸的场景。

js实现图片的放大缩小

const img = document.querySelector('img');
const originalWidth = img.clientWidth;
const originalHeight = img.clientHeight;

function resize(percentage) {
    img.width = originalWidth * percentage;
    img.height = originalHeight * percentage;
}

// 放大到120%
document.getElementById('enlarge').addEventListener('click', () => resize(1.2));
// 缩小到80%
document.getElementById('shrink').addEventListener('click', () => resize(0.8));

鼠标滚轮缩放实现

监听鼠标滚轮事件实现动态缩放，需注意阻止默认事件避免页面滚动。

js实现图片的放大缩小

const img = document.querySelector('img');
let scale = 1;

img.addEventListener('wheel', (e) => {
    e.preventDefault();
    scale += e.deltaY * -0.01;
    scale = Math.min(Math.max(0.1, scale), 4);
    img.style.transform = `scale(${scale})`;
});

触摸屏双指缩放实现

通过检测触摸事件实现移动设备上的捏合缩放功能。

const img = document.querySelector('img');
let initialDistance = null;

img.addEventListener('touchstart', (e) => {
    if (e.touches.length === 2) {
        initialDistance = Math.hypot(
            e.touches[0].clientX - e.touches[1].clientX,
            e.touches[0].clientY - e.touches[1].clientY
        );
    }
});

img.addEventListener('touchmove', (e) => {
    if (e.touches.length === 2 && initialDistance) {
        const currentDistance = Math.hypot(
            e.touches[0].clientX - e.touches[1].clientX,
            e.touches[0].clientY - e.touches[1].clientY
        );
        const scale = currentDistance / initialDistance;
        img.style.transform = `scale(${scale})`;
    }
});

使用第三方库实现高级功能

对于需要复杂交互的场景，可以考虑使用专业库如：

// 使用medium-zoom的示例
import mediumZoom from 'medium-zoom';

const zoom = mediumZoom('img');
zoom.on('open', () => {
    console.log('Image zoomed');
});