动态元素跟随鼠标并指向屏幕中心教程-js教程-PHP中文网

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

霞舞

发布： 2025-08-24 17:00:02

原创

995人浏览过

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

本教程详细讲解如何创建一个动态网页元素，使其在跟随鼠标移动的同时，始终保持与屏幕中心对齐。我们将通过JavaScript计算鼠标位置、屏幕中心和元素旋转角度，结合CSS进行定位和样式设置，实现这一互动效果，并提供完整的代码示例及注意事项。

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

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

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

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

HTML 结构

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

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

登录后复制

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; /* 防止页面出现滚动条，尤其是在隐藏光标时 */
}

登录后复制

样式说明：

稿定AI文案

小红书笔记、公众号、周报总结、视频脚本等智能文案生成平台

169

查看详情

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 代码详解：

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

完整代码示例

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态元素跟随鼠标并指向屏幕中心</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden; /* 防止页面滚动 */
            background-color: #f0f0f0;
        }

        #myDiv {
            cursor: none; /* 隐藏鼠标光标 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: transparent; /* 背景色透明，只显示SVG */
            transform-origin: center center; /* 旋转中心 */
            background: url(https://upload.wikimedia.org/wikipedia/commons/8/89/Flashlight.svg) no-repeat center / contain;
            /* transform: rotate(-100deg); */ /* 如果需要初始CSS旋转，可以在此设置 */
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>

    <script>
        const myDiv = document.getElementById('myDiv');

        // 初始计算屏幕中心
        let centerX = window.innerWidth / 2;
        let centerY = window.innerHeight / 2;

        // 监听窗口大小变化，实时更新中心点
        window.addEventListener('resize', () => {
            centerX = window.innerWidth / 2;
            centerY = window.innerHeight / 2;
        });

        document.addEventListener('mousemove', (event) => {
            const mouseX = event.clientX;
            const mouseY = event.clientY;

            // 计算从鼠标位置到屏幕中心的向量
            const deltaX = centerX - mouseX;
            const deltaY = centerY - mouseY;

            // 使用 Math.atan2 获取角度，并转换为度数
            let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);

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

            // 计算元素的平移位置
            const translateX = mouseX - distance;
            const translateY = mouseY - distance;

            // SVG图像的额外旋转校准值
            // 这个值需要根据实际SVG的默认朝向进行调整，确保它正确指向目标

登录后复制

以上就是动态元素跟随鼠标并指向屏幕中心教程的详细内容，更多请关注php中文网其它相关文章！