动态元素跟随鼠标并指向屏幕中心教程-小浪学习网

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

本教程详细讲解如何创建一个动态网页元素，使其在跟随鼠标移动的同时，始终保持与屏幕中心对齐。我们将通过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; /* 防止页面出现滚动条，尤其是在隐藏光标时 */ }

样式说明：

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的默认朝向进行调整，确保它正确指向目标

文章版权归作者所有，未经允许请勿转载。

THE END