aifo-portal-web/assets/js/common.js

document.addEventListener('DOMContentLoaded', () => {

    const images = document.querySelectorAll('.article_content img');
    if (!images.length) return;

    // 创建 lightbox
    const lightbox = document.createElement('div');
    lightbox.className = 'img-lightbox';
    lightbox.innerHTML = '<img src="" alt="">';
    document.body.appendChild(lightbox);

    const lightboxImg = lightbox.querySelector('img');

    let scale = 1;
    const SCALE_STEP = 0.1;
    const SCALE_MIN = 1;
    const SCALE_MAX = 3;

    function updateScale() {
        lightboxImg.style.transform = `scale(${scale})`;
        lightboxImg.style.cursor = scale > 1 ? 'zoom-out' : 'zoom-in';
    }

    images.forEach(img => {
        img.addEventListener('click', () => {
            lightboxImg.src = img.src;
            scale = 1;
            updateScale();
            lightbox.classList.add('active');
        });
    });

    // 鼠标滚轮缩放
    lightbox.addEventListener('wheel', (e) => {
        e.preventDefault();

        if (!lightbox.classList.contains('active')) return;

        if (e.deltaY < 0) {
            scale = Math.min(scale + SCALE_STEP, SCALE_MAX);
        } else {
            scale = Math.max(scale - SCALE_STEP, SCALE_MIN);
        }

        updateScale();
    }, { passive: false });

    // 点击背景关闭
    lightbox.addEventListener('click', (e) => {
        if (e.target !== lightboxImg) {
            lightbox.classList.remove('active');
            lightboxImg.src = '';
            scale = 1;
            updateScale();
        }
    });
});