实现Div随鼠标偏移100px并指向屏幕中心的交互效果求助

问题核心 #

需要让div始终朝向屏幕中心，同时在鼠标位置周围100px处偏移，偏移规则根据鼠标所在屏幕区域决定：

• 鼠标在左中区域 → div在鼠标左侧，指向中心
• 鼠标在左上区域 → div在鼠标左上方，指向中心
• 鼠标在右下区域 → div在鼠标右下方，指向中心
• 其余区域同理

原代码问题 #

1. 偏移方向固定为鼠标位置减100px，无法根据屏幕区域动态调整div在鼠标周围的位置
2. 角度计算的是鼠标到div的方向，而非div指向屏幕中心的方向

解决方案代码 #

<div id="myDiv"></div>

#myDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  transform-origin: center center;
  background: url(https://upload.wikimedia.org/wikipedia/commons/8/89/Flashlight.svg) no-repeat center / contain;
  pointer-events: none; /* 避免遮挡鼠标事件 */
}

const myDiv = document.getElementById('myDiv');
const distance = 100; // 鼠标与div的固定距离

document.addEventListener('mousemove', (event) => {
  // 获取屏幕中心坐标
  const screenCenterX = window.innerWidth / 2;
  const screenCenterY = window.innerHeight / 2;
  
  // 计算鼠标相对于屏幕中心的位置，确定偏移方向
  const isMouseLeftOfCenter = event.clientX < screenCenterX;
  const isMouseAboveCenter = event.clientY < screenCenterY;
  
  // 计算div的偏移量：根据鼠标所在区域，决定在鼠标的哪个方向
  const offsetX = isMouseLeftOfCenter ? -distance : distance;
  const offsetY = isMouseAboveCenter ? -distance : distance;
  
  // 设置div的基础位置：鼠标位置加上偏移量，再减去div自身的一半（让div中心对准偏移点）
  const divX = event.clientX + offsetX - myDiv.offsetWidth / 2;
  const divY = event.clientY + offsetY - myDiv.offsetHeight / 2;
  
  // 计算div指向屏幕中心的角度：从div中心到屏幕中心的向量角度
  const deltaToCenterX = screenCenterX - (divX + myDiv.offsetWidth / 2);
  const deltaToCenterY = screenCenterY - (divY + myDiv.offsetHeight / 2);
  const angle = Math.atan2(deltaToCenterY, deltaToCenterX) * (180 / Math.PI);
  
  // 应用transform
  myDiv.style.transform = `translate(${divX}px, ${divY}px) rotate(${angle}deg)`;
});

关键逻辑说明 #

1. 屏幕区域判断：通过比较鼠标坐标与屏幕中心坐标，确定div应该在鼠标的左侧/右侧、上方/下方
2. 位置计算：基于鼠标位置加上对应方向的偏移量，再减去div自身尺寸的一半，保证div的偏移点是其中心位置
3. 角度计算：计算div中心到屏幕中心的向量，用Math.atan2得到弧度后转成角度，确保div始终朝向屏幕中心
4. pointer-events: none：避免div遮挡鼠标，导致mousemove事件无法正常触发

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