JavaScript 文字跟随鼠标移动

原创

mob649e8161c39d 2024-12-03 05:13:09 ©著作权

文章标签 鼠标移动 HTML Text 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8161c39d的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript 实现文字跟随鼠标移动的教程

在这篇文章中，我们将学习如何用 JavaScript 来实现一个简单的“文本跟随鼠标移动”的效果。我们将涵盖整个步骤，包括所需的代码和解释。在开始之前，我们先了解一下实现流程。

实现流程

以下是实现“文字跟随鼠标移动”的流程步骤：

步骤	描述
1. 创建 HTML 结构	我们需要一个基础的 HTML 页面来展示文本。
2. 添加 CSS 样式	为我们的文本添加样式，使其更美观。
3. 编写 JavaScript	实现鼠标移动事件，更新文本的位置。

接下来，我们将详细讨论每一步。

步骤一：创建 HTML 结构

首先，我们需要一个简单的 HTML 页面。这是代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字跟随鼠标移动</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="follow-text">跟随鼠标的文字</div>
    <script src="script.js"></script>
</body>
</html>

代码解释：

<!DOCTYPE html>: 声明文档类型。
<html lang="zh">: 指定页面语言为中文。
<head>: 包含元数据，例如字符集和标题。
<body>: 页面内容部分，包含要跟随鼠标的文本<div>元素。

步骤二：添加 CSS 样式

接下来，我们需要为文本添加一些基本的样式。以下是 styles.css 的内容：

body {
    margin: 0;
    height: 100vh; /* 设置高度以填满视口 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* 背景色 */
}

#follow-text {
    position: absolute; /* 使文本可以在页面自由移动 */
    font-size: 24px; /* 字体大小 */
    color: #333; /* 字体颜色 */
    transition: transform 0.1s; /* 平滑过渡效果 */
}

代码解释：

body: 设置页面的基本样式，包括背景色和居中显示。
#follow-text: 设置文本的定位、大小和颜色。position: absolute; 使文本可以根据鼠标位置自由移动。

步骤三：编写 JavaScript

现在我们需要添加 JavaScript，使文本根据鼠标移动。以下是 script.js 的内容：

// 获取到我们要跟随鼠标的元素
const followText = document.getElementById('follow-text');

// 添加鼠标移动事件监听器
document.addEventListener('mousemove', (event) => {
    // 获取鼠标的坐标
    const x = event.clientX; // 水平坐标
    const y = event.clientY; // 垂直坐标

    // 更新文本的位置
    followText.style.transform = `translate(${x}px, ${y}px)`; // 移动文本位置
});

代码解释：

const followText: 使用 document.getElementById 获取文本元素。
document.addEventListener('mousemove', ...): 监听鼠标移动事件。
event.clientX 和 event.clientY: 获取鼠标相对于视口的位置。
followText.style.transform: 在鼠标移动时更新文本位置，使其跟随鼠标。

流程图

为了更好地理解整个流程，下面是实现过程的流程图。

flowchart TD
    A(创建 HTML 结构) --> B(添加 CSS 样式)
    B --> C(编写 JavaScript)

序列图

接下来，我们可以通过序列图来展示用户与文本之间的互动。

sequenceDiagram
    participant User
    participant Browser
    participant Text

    User->>Browser: 移动鼠标
    Browser->>Text: 获取鼠标位置
    Text->>Text: 更新位置
    Browser-->>User: 文本跟随鼠标