如何用JavaScript实现按住鼠标时div及RGB灯光元素放大效果？

以下是针对你两个需求的完整实现方案，核心通过transform: scale()配合过渡动画实现平滑缩放，同时兼容鼠标和触摸操作：

完整代码 #

// 获取DOM元素
let clickOnPic = document.getElementById("background-picture"); 
let lightEl = document.getElementById("RGB-container");
let body = document.querySelector("body");

// 初始隐藏灯光元素
lightEl.style.display = "none";
// 给需要缩放的元素添加过渡效果，让缩放更平滑
clickOnPic.style.transition = "transform 0.2s ease";
lightEl.style.transition = "transform 0.2s ease";

// 灯光旋转动画配置
const lightRotation = { transform: "rotate(360deg)" };
const lightTiming = {
    duration: 2500,
    iterations: Infinity
};

// 鼠标跟随函数
function attachToMouse(e) {
    let mouseX = e.clientX;
    let mouseY = e.clientY;
    let lightX = mouseX - (lightEl.offsetWidth / 2);
    let lightY = mouseY - (lightEl.offsetHeight / 2);
    lightEl.style.left = lightX + "px";
    lightEl.style.top = lightY + "px"; 
}

// 元素放大函数
function scaleElementUp(element) {
    // 针对灯光元素，保留旋转动画的同时添加缩放
    if (element === lightEl) {
        element.style.transform = "rotate(360deg) scale(1.2)";
    } else {
        element.style.transform = "scale(1.2)";
    }
}

// 元素恢复原尺寸函数
function scaleElementDown(element) {
    if (element === lightEl) {
        element.style.transform = "rotate(360deg) scale(1)";
    } else {
        element.style.transform = "scale(1)";
    }
}

// 背景图片div的缩放事件绑定
clickOnPic.addEventListener("pointerdown", () => scaleElementUp(clickOnPic));
clickOnPic.addEventListener("pointerup", () => scaleElementDown(clickOnPic));
clickOnPic.addEventListener("pointerleave", () => scaleElementDown(clickOnPic));

// RGB灯光元素的缩放事件绑定
lightEl.addEventListener("pointerdown", () => scaleElementUp(lightEl));
lightEl.addEventListener("pointerup", () => scaleElementDown(lightEl));
lightEl.addEventListener("pointerleave", () => scaleElementDown(lightEl));

// 显示灯光元素的事件
document.addEventListener("pointerup", function(event) {
    if(lightEl.style.display === "none"){        
        lightEl.style.display = "block";
        lightEl.animate(lightRotation, lightTiming);
        body.style.cursor = "none";
        attachToMouse(event);
    }
});

// 灯光跟随鼠标移动
document.addEventListener("pointermove", attachToMouse);

关键实现要点 #

• 平滑过渡：给目标元素添加transition: transform 0.2s ease，让缩放过程自然流畅，可通过调整0.2s修改动画速度。
• 高效缩放：使用transform: scale()实现放大，该属性不会改变元素布局，比修改宽高的性能更优。
• 事件兼容性：采用pointerdown/pointerup/pointerleave事件，同时支持鼠标和触摸设备，覆盖更多场景。
• 状态恢复：添加pointerleave事件监听，避免用户按住鼠标移出元素后，元素持续保持放大状态。
• 多变换共存：针对灯光元素，在缩放时保留旋转动画，通过组合rotate()和scale()实现多变换效果。

内容的提问来源于stack exchange，提问作者user22755827