当前位置：首页 > JavaScript

js实现图片的放大缩小

2026-01-30 16:24:38JavaScript

实现图片放大缩小的基础方法

使用JavaScript实现图片放大缩小功能可以通过CSS的transform属性结合scale值来控制。以下是一个基础实现示例：

js实现图片的放大缩小

const img = document.getElementById('zoomable-image');
let currentScale = 1;

function zoomIn() {
    currentScale += 0.1;
    img.style.transform = `scale(${currentScale})`;
}

function zoomOut() {
    if (currentScale > 0.2) {
        currentScale -= 0.1;
        img.style.transform = `scale(${currentScale})`;
    }
}

通过鼠标滚轮控制缩放

添加鼠标滚轮事件监听器可以实现更直观的缩放交互：

js实现图片的放大缩小

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

使用transform-origin控制缩放中心点

默认情况下缩放以图片中心为原点，可以通过transform-origin调整：

img.style.transformOrigin = '0 0'; // 左上角为原点

结合动画效果增强体验

添加CSS过渡效果使缩放更平滑：

#zoomable-image {
    transition: transform 0.1s ease;
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <style>
        #zoomable-image {
            transition: transform 0.1s ease;
        }
        .controls {
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <button onclick="zoomIn()">放大</button>
        <button onclick="zoomOut()">缩小</button>
    </div>
    <img id="zoomable-image" src="your-image.jpg" width="500">

    <script>
        const img = document.getElementById('zoomable-image');
        let currentScale = 1;

        function zoomIn() {
            currentScale += 0.1;
            updateScale();
        }

        function zoomOut() {
            if (currentScale > 0.2) {
                currentScale -= 0.1;
                updateScale();
            }
        }

        img.addEventListener('wheel', function(e) {
            e.preventDefault();
            currentScale += e.deltaY * -0.01;
            currentScale = Math.min(Math.max(0.1, currentScale), 4);
            updateScale();
        });

        function updateScale() {
            img.style.transform = `scale(${currentScale})`;
        }
    </script>
</body>
</html>