js局部放大

// 示例代码：使用 requestAnimationFrame 和 CSS3 transform 实现平滑放大
const element = document.getElementById('zoomable');
let scale = 1;

element.addEventListener('mouseenter', () => {
    let start;
    const zoomIn = (timestamp) => {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        scale += 0.01 * progress;
        element.style.transform = `scale(${scale})`;
        if (scale < 2) {
            requestAnimationFrame(zoomIn);
        }
    };
    requestAnimationFrame(zoomIn);
});

element.addEventListener('mouseleave', () => {
    let start;
    const zoomOut = (timestamp) => {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        scale -= 0.01 * progress;
        element.style.transform = `scale(${scale})`;
        if (scale > 1) {
            requestAnimationFrame(zoomOut);
        }
    };
    requestAnimationFrame(zoomOut);
});

/* 示例代码：优化图像渲染 */
#zoomable {
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

// 示例代码：计算放大窗口位置
const element = document.getElementById('zoomable');
const zoomWindow = document.getElementById('zoom-window');

element.addEventListener('click', (event) => {
    const rect = element.getBoundingClientRect();
    const offsetX = event.clientX - rect.left;
    const offsetY = event.clientY - rect.top;

    zoomWindow.style.left = `${event.clientX + 10}px`;
    zoomWindow.style.top = `${event.clientY + 10}px`;
    zoomWindow.style.backgroundPosition = `-${offsetX * 2}px -${offsetY * 2}px`;
});