当前位置：首页 > JavaScript

js实现缩放功能

2026-02-03 06:10:56JavaScript

使用CSS transform实现缩放

通过CSS的transform: scale()属性可以实现元素的缩放效果。结合JavaScript动态调整缩放比例。

const element = document.getElementById('target');
let scale = 1;

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

function zoomOut() {
    scale -= 0.1;
    element.style.transform = `scale(${scale})`;
}

监听鼠标滚轮事件缩放

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

const element = document.getElementById('target');
let scale = 1;

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

使用动画效果平滑缩放

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

#target {
    transition: transform 0.2s ease;
}

基于画布的缩放实现

对于Canvas绘图，需要结合缩放和重新绘制逻辑。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let scale = 1;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.scale(scale, scale);
    // 绘制内容
    ctx.restore();
}

function handleZoom(newScale) {
    scale = newScale;
    draw();
}

保持缩放中心点

在缩放时保持鼠标位置作为中心点，需要计算偏移量。

let originX = 0;
let originY = 0;

element.addEventListener('mousemove', (e) => {
    originX = e.offsetX;
    originY = e.offsetY;
});

function zoom(scaleFactor) {
    const transform = window.getComputedStyle(element).transform;
    const matrix = new DOMMatrix(transform);

    const point = new DOMPoint(originX, originY);
    const transformed = point.matrixTransform(matrix.inverse());

    matrix.translateSelf(transformed.x, transformed.y);
    matrix.scaleSelf(scaleFactor);
    matrix.translateSelf(-transformed.x, -transformed.y);

    element.style.transform = matrix.toString();
}

响应式缩放控制

结合按钮或手势事件创建完整的缩放控制界面。

js实现缩放功能

<button onclick="zoom(1.1)">放大</button>
<button onclick="zoom(0.9)">缩小</button>
<div id="zoom-value">100%</div>

<script>
function zoom(factor) {
    scale *= factor;
    element.style.transform = `scale(${scale})`;
    document.getElementById('zoom-value').textContent = `${Math.round(scale * 100)}%`;
}
</script>