当前位置：首页 > JavaScript

js实现图片放大效果

2026-04-04 03:44:19JavaScript

实现图片放大效果的JavaScript方法

监听鼠标事件实现放大

通过监听鼠标移动事件，动态调整图片的放大比例和位置。

const img = document.querySelector('.zoomable-image');
const container = document.querySelector('.image-container');

container.addEventListener('mousemove', (e) => {
    const x = e.clientX - e.target.getBoundingClientRect().left;
    const y = e.clientY - e.target.getBoundingClientRect().top;

    img.style.transformOrigin = `${x}px ${y}px`;
    img.style.transform = 'scale(2)';
});

container.addEventListener('mouseleave', () => {
    img.style.transform = 'scale(1)';
});

使用CSS过渡实现平滑动画

结合CSS过渡属性使放大效果更加平滑。

js实现图片放大效果

.zoomable-image {
    transition: transform 0.3s ease;
    max-width: 100%;
}

实现点击放大/缩小功能

通过点击事件切换放大状态。

js实现图片放大效果

let isZoomed = false;
img.addEventListener('click', () => {
    isZoomed = !isZoomed;
    img.style.transform = isZoomed ? 'scale(2)' : 'scale(1)';
});

使用第三方库实现高级效果

推荐使用zoom.js或medium-zoom等库快速实现专业效果。

<script src="https://unpkg.com/medium-zoom@1.0.6/dist/medium-zoom.min.js"></script>
<script>
    mediumZoom('.zoomable-image', {
        margin: 24,
        background: '#000'
    });
</script>

响应式处理

确保放大效果在不同设备上正常工作。

function handleResize() {
    if (window.innerWidth < 768) {
        img.style.maxWidth = '100%';
    } else {
        img.style.maxWidth = '50%';
    }
}
window.addEventListener('resize', handleResize);