动态元素跟随鼠标并指向屏幕中心教程

核心概念：实现元素的跟随与指向

在网页交互设计中，有时需要创建一种视觉效果：一个元素不仅能跟随用户的鼠标移动，还能同时指向屏幕的某个固定点（例如屏幕中心）。这要求我们精确计算元素的平移（translate）和旋转（rotate）变换。

实现此效果的关键在于以下几点：

1. 确定屏幕中心点：这是我们元素始终指向的目标。
2. 获取鼠标当前位置：作为元素平移的参考点。
3. 计算鼠标位置到屏幕中心的向量：这个向量将决定元素的指向角度。
4. 应用CSS transform 属性：通过 translate 和 rotate 实现元素的移动和旋转。
5. 考虑SVG图像的默认方向：许多SVG图标在绘制时有其固有的朝向，需要额外的旋转校正。

HTML 结构

首先，我们需要一个用于展示效果的HTML元素。这里我们使用一个 div，并为其设置一个 id 以便JavaScript操作。

CSS 样式

为了让 myDiv 能够自由定位和旋转，我们需要为其定义一些基础样式。

#myDiv {
  cursor: none; /* 隐藏鼠标光标，增强沉浸感 */
  position: absolute; /* 绝对定位，方便通过JS控制位置 */
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: lightgray; /* 备用背景色 */
  transform-origin: center center; /* 设置旋转中心为元素自身中心 */
  /* transform: rotate(-100deg); */ /* 初始旋转，可用于SVG校准或特定效果 */
  background: url(https://upload.wikimedia.org/wikipedia/commons/8/89/Flashlight.svg) no-repeat center / contain; /* 使用手电筒SVG作为背景图 */
}

body {
  overflow: hidden; /* 防止页面出现滚动条，尤其是在隐藏光标时 */
}

样式说明：

GAIPPT

AI PPT制作和美化神器

下载

• cursor: none;：隐藏默认的鼠标光标，让自定义元素看起来更像光标。
• position: absolute;：允许我们使用 top、left 属性或 transform: translate() 精确控制元素位置。
• transform-origin: center center;：确保元素围绕其自身的中心点进行旋转，而不是默认的左上角。
• background 属性：我们使用一个手电筒SVG作为背景图像，它将作为我们“指向”的视觉指示器。
• overflow: hidden;：在 body 上设置此属性可以防止页面因元素超出视口而产生滚动条，这在全屏交互中尤其重要。

JavaScript 逻辑

JavaScript是实现动态效果的核心。我们需要监听鼠标移动事件，并根据鼠标位置计算元素的平移和旋转。

// 获取屏幕的中心点坐标，这将是我们的元素始终指向的目标
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;

// 获取要操作的DOM元素
const myDiv = document.getElementById('myDiv');

document.addEventListener('mousemove', (event) => {
  // 获取鼠标当前的X和Y坐标
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  // 计算从鼠标位置到屏幕中心的向量 (deltaX, deltaY)
  // 这里的deltaX和deltaY是从鼠标指向中心点的方向
  const deltaX = centerX - mouseX;
  const deltaY = centerY - mouseY;

  // 使用 Math.atan2 计算角度（弧度），然后转换为度数
  // atan2(y, x) 返回的弧度值范围是 (-PI, PI]
  let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);

  // 定义元素与鼠标之间的固定偏移距离
  const distance = 50; 

  // 计算元素的平移位置，使其与鼠标保持一定的偏移
  // 这里将元素的左上角放置在鼠标位置左上角 'distance' 像素处
  const translateX = mouseX - distance;
  const translateY = mouseY - - distance; // 修正：应为 mouseY - distance

  // 假设SVG图像的默认朝向不是0度（指向右侧），
  // extraRotationForSVG用于校准SVG的初始方向，使其在角度为0时指向正确方向
  // 实际值需要根据SVG图像的内部绘制方向进行调整
  const extraRotationForSVG = 210; 

  // 应用CSS transform，同时进行平移和旋转
  myDiv.style.transform = `translate(${translateX}px, ${translateY}px) rotate(${angle + extraRotationForSVG}deg)`;
});

JavaScript 代码详解：

1. centerX, centerY：通过 window.innerWidth 和 window.innerHeight 获取浏览器视口宽度和高度，并计算出屏幕的中心点坐标。这些值在页面加载时确定，如果窗口大小改变，需要重新计算。
2. event.clientX, event.clientY：在 mousemove 事件中，这两个属性提供了鼠标相对于浏览器视口的当前X和Y坐标。
3. deltaX, deltaY：这是从鼠标位置到屏幕中心点的向量分量。例如，如果鼠标在屏幕中心左侧，centerX - mouseX 将为正值，表示需要向右旋转。
4. Math.atan2(deltaY, deltaX)：这是一个非常重要的数学函数，它接收 y 和 x 两个参数，返回从 x 轴正方向到点 (x, y) 的角度（弧度）。它能够正确处理所有四个象限，避免了 Math.atan(y/x) 可能出现的象限判断问题。我们将弧度转换为度数，以便CSS rotate 属性使用。
5. distance：这个变量定义了 myDiv 的左上角与鼠标光标之间的固定距离。你可以调整这个值来改变元素跟随鼠标的紧密程度或偏移量。
6. translateX, translateY：根据鼠标的当前位置和 distance，计算出 myDiv 需要平移到的位置。mouseX - distance 意味着 myDiv 的左侧将比鼠标光标左移 distance 像素。
7. extraRotationForSVG：这个值用于校正SVG图像的默认朝向。例如，如果你的SVG图标在0度旋转时实际上是向上指的，而你希望它在 angle 为0时指向右侧，那么你需要添加一个适当的偏移量（如90度或270度）来校准。实际值需要通过实验来确定，以使SVG的“指向”方向与计算出的 angle 匹配。
8. myDiv.style.transform = ...：通过设置元素的 transform 属性，同时应用 translate（平移）和 rotate（旋转）变换。这些变换会按照指定的顺序应用，最终实现元素跟随鼠标并指向屏幕中心的效果。

完整代码示例

将上述HTML、CSS和JavaScript代码组合，即可实现所需效果。