利用JavaScript和CSS实现动态悬停文本乱码与还原效果-js教程-PHP中文网

利用JavaScript和CSS实现动态悬停文本乱码与还原效果

本教程将详细介绍如何利用HTML的data属性、CSS以及JavaScript的setInterval和事件监听器，创建一种引人注目的文本乱码与还原（“黑客”效果）交互效果。当鼠标悬停在特定文本上时，文本会从随机字符逐渐还原成目标文字；当鼠标移开时，文本又会迅速恢复为乱码状态，从而实现动态且富有创意的用户体验。

1. 效果概述与核心原理

这种文本效果模拟了电影中常见的“黑客”或“数据加载”的视觉体验，即文本在随机字符和目标字符之间进行平滑过渡。实现这一效果的核心在于：

HTML data属性： 用于存储文本的原始（目标）值，以便JavaScript可以读取并还原。
JavaScript setInterval： 用于创建动画循环，在每个时间步长内更新文本内容，实现字符的逐步还原或随机化。
事件监听： 通过mouseenter和mouseleave事件触发文本的乱码和还原过程。
随机字符串生成： 能够快速生成指定长度的随机字符序列。

2. HTML 结构

首先，我们需要在HTML中定义要应用此效果的元素。为了方便JavaScript识别和获取目标文本，我们使用data-scramble属性来存储原始文本。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态文本乱码与还原效果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>悬停此处查看效果：</h1>
    <div data-scramble="Hello, World!"></div>
    <div data-scramble="Stack Overflow"></div>
    <div data-scramble="JavaScript Tutorial"></div>

    <script src="script.js"></script>
</body>
</html>

登录后复制

在上述代码中，我们创建了几个div元素，并为它们添加了data-scramble属性，其值即为鼠标悬停后要还原的最终文本。

3. CSS 样式

为了让乱码效果更具“代码”感，通常会使用等宽字体（monospace）。以下是一个简单的CSS规则，你可以根据需要进行调整。

/* style.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1a1a1a;
    color: #eee;
    margin: 0;
}

h1 {
    margin-bottom: 20px;
    color: #0f0;
}

[data-scramble] {
    font: 2rem/1.4 monospace; /* 使用等宽字体，并设置字号和行高 */
    color: #0f0; /* 绿色文字，增强“黑客”感 */
    margin: 10px 0;
    padding: 5px 10px;
    border: 1px solid #050;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

[data-scramble]:hover {
    border-color: #0f0;
}

登录后复制

4. JavaScript 逻辑

JavaScript是实现动态效果的核心。我们将定义几个辅助函数来管理乱码和还原过程。

立即学习“Java免费学习笔记（深入）”；

4.1 随机字符串生成函数 randomString

这个函数用于生成指定长度的随机字符，并可以在生成的字符串前添加一个前缀（用于还原效果）。

// script.js

/**
 * 生成指定长度的随机字符串。
 * @param {number} n - 目标字符串的长度。
 * @param {string} [r=''] - 可选前缀，随机字符将追加到此字符串之后。
 * @returns {string} 生成的随机字符串。
 */
const randomString = (n, r = '') => {
  while (n--) {
    // 生成一个0-61之间的随机数
    let charCode = Math.random() * 62 | 0;
    // 将数字映射到ASCII字符：0-9, A-Z, a-z
    // 0-9 对应 ASCII 48-57
    // 10-35 对应 ASCII 65-90 (A-Z)
    // 36-61 对应 ASCII 97-122 (a-z)
    charCode += charCode > 9 ? (charCode < 36 ? 55 : 61) : 48;
    r += String.fromCharCode(charCode);
  }
  return r;
};

登录后复制

这个randomString函数巧妙地利用ASCII码生成数字、大写字母和小写字母的随机组合。

4.2 文本还原函数 unscramble

当鼠标悬停时，此函数将逐步将乱码还原为目标文本。

/**
 * 逐步还原文本到其原始值。
 * @param {HTMLElement} el - 要还原的DOM元素。
 */
const unscramble = (el) => {
  // 从data-scramble属性获取目标文本的字符数组
  const chars = [...el.dataset.scramble];
  const totalChars = chars.length;

  let iteration = 0; // 控制每次更新时随机字符的显示次数
  let charIndex = 0; // 当前已还原的字符索引
  let solvedPrefix = ""; // 已经还原的字符前缀

  // 清除任何现有的动画，防止重复启动
  clearInterval(el._itv); 

  // 使用setInterval创建动画循环
  el._itv = setInterval(() => {
    // 每10次迭代（30ms * 10 = 300ms），还原一个字符
    if (iteration > 10) {
      iteration = 0; // 重置迭代计数器
      solvedPrefix += chars[charIndex]; // 添加下一个目标字符到已还原前缀
      charIndex += 1; // 移动到下一个字符
    }

    // 更新元素文本：已还原前缀 + 剩余长度的随机字符
    el.textContent = randomString(totalChars - charIndex, solvedPrefix);

    // 如果所有字符都已还原，则停止动画
    if (charIndex === totalChars) {
      clearInterval(el._itv);
    }
    iteration += 1; // 增加迭代计数器
  }, 30); // 每30毫秒更新一次
};

登录后复制

关键点解释：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

el.dataset.scramble：通过dataset属性获取HTML中定义的data-scramble值。
el._itv：将setInterval的ID直接存储在DOM元素对象上。这是一种常见且有效的模式，允许我们轻松地清除特定元素的动画，避免全局变量污染。
iteration：这个变量控制了每个字符在被“解决”之前，要显示多少次随机字符。值越大，过渡效果越慢。
solvedPrefix：存储已经还原的字符部分。randomString函数会将其作为前缀，后面跟着随机字符。

4.3 文本乱码函数 scramble

当鼠标移开时，此函数会立即将文本转换为乱码状态。

/**
 * 立即将文本转换为乱码状态。
 * @param {HTMLElement} el - 要乱码的DOM元素。
 */
const scramble = (el) => {
  clearInterval(el._itv); // 停止任何正在进行的还原动画
  // 生成与目标文本长度相同的随机字符串并设置为元素内容
  el.textContent = randomString([...el.dataset.scramble].length);
};

登录后复制

4.4 事件绑定函数 scrambler

这个函数负责为每个带有data-scramble属性的元素绑定mouseenter和mouseleave事件，并初始化其状态。

/**
 * 为DOM元素添加乱码/还原效果的事件监听器。
 * @param {HTMLElement} el - 要应用效果的DOM元素。
 */
const scrambler = (el) => {
  el.addEventListener("mouseenter", () => unscramble(el)); // 鼠标进入时还原
  el.addEventListener("mouseleave", () => scramble(el));  // 鼠标离开时乱码
  scramble(el); // 初始化时先设置为乱码状态
};

登录后复制

4.5 初始化所有元素

最后，我们需要找到所有带有data-scramble属性的元素，并为它们应用scrambler函数。

// 遍历所有带有data-scramble属性的元素，并应用效果
document.querySelectorAll("[data-scramble]").forEach(scrambler);

登录后复制

5. 完整代码示例

将上述HTML、CSS和JavaScript代码分别保存为index.html、style.css和script.js，并在同一目录下。

index.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态文本乱码与还原效果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>悬停此处查看效果：</h1>
    <div data-scramble="Hello, World!"></div>
    <div data-scramble="Stack Overflow"></div>
    <div data-scramble="JavaScript Tutorial"></div>

    <script src="script.js"></script>
</body>
</html>

登录后复制

style.css:

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1a1a1a;
    color: #eee;
    margin: 0;
}

h1 {
    margin-bottom: 20px;
    color: #0f0;
}

[data-scramble] {
    font: 2rem/1.4 monospace; /* 使用等宽字体，并设置字号和行高 */
    color: #0f0; /* 绿色文字，增强“黑客”感 */
    margin: 10px 0;
    padding: 5px 10px;
    border: 1px solid #050;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

[data-scramble]:hover {
    border-color: #0f0;
}

登录后复制

script.js:

/**
 * 生成指定长度的随机字符串。
 * @param {number} n - 目标字符串的长度。
 * @param {string} [r=''] - 可选前缀，随机字符将追加到此字符串之后。
 * @returns {string} 生成的随机字符串。
 */
const randomString = (n, r = '') => {
  while (n--) {
    let charCode = Math.random() * 62 | 0;
    charCode += charCode > 9 ? (charCode < 36 ? 55 : 61) : 48;
    r += String.fromCharCode(charCode);
  }
  return r;
};

/**
 * 逐步还原文本到其原始值。
 * @param {HTMLElement} el - 要还原的DOM元素。
 */
const unscramble = (el) => {
  const chars = [...el.dataset.scramble];
  const totalChars = chars.length;

  let iteration = 0;
  let charIndex = 0;
  let solvedPrefix = "";

  clearInterval(el._itv); 

  el._itv = setInterval(() => {
    if (iteration > 10) { // 每10次迭代（300ms）还原一个字符
      iteration = 0;
      solvedPrefix += chars[charIndex];
      charIndex += 1;
    }

    el.textContent = randomString(totalChars - charIndex, solvedPrefix);

    if (charIndex === totalChars) {
      clearInterval(el._itv);
    }
    iteration += 1;
  }, 30); // 每30毫秒更新一次
};

/**
 * 立即将文本转换为乱码状态。
 * @param {HTMLElement} el - 要乱码的DOM元素。
 */
const scramble = (el) => {
  clearInterval(el._itv);
  el.textContent = randomString([...el.dataset.scramble].length);
};

/**
 * 为DOM元素添加乱码/还原效果的事件监听器。
 * @param {HTMLElement} el - 要应用效果的DOM元素。
 */
const scrambler = (el) => {
  el.addEventListener("mouseenter", () => unscramble(el));
  el.addEventListener("mouseleave", () => scramble(el));
  scramble(el); // 初始化时先设置为乱码状态
};

// 遍历所有带有data-scramble属性的元素，并应用效果
document.querySelectorAll("[data-scramble]").forEach(scrambler);

登录后复制

6. 注意事项与扩展

动画速度与平滑度： setInterval的第二个参数（30毫秒）决定了动画的帧率。值越小，动画越流畅，但可能消耗更多CPU资源。unscramble函数中的iteration > 10条件决定了每个字符被还原的速度，增加10这个值会使还原变慢。
字符集： randomString函数当前生成的是数字、大写字母和小写字母。你可以根据需要修改其逻辑，包含更多特殊字符或只包含特定类型的字符。
性能： 对于页面上大量元素同时进行动画的情况，需要注意性能。本例中的实现对于少量元素是高效的，但如果元素数量非常多，可以考虑使用requestAnimationFrame替代setInterval以获得更好的浏览器优化。
可访问性： 这种快速变化的文本效果可能对某些用户（如患有视觉障碍或认知障碍的用户）造成困扰。在生产环境中，应考虑提供关闭动画的选项，或在关键信息上避免使用此类效果。
兼容性： dataset属性和forEach方法在现代浏览器中广泛支持。对于需要兼容IE10及以下版本的项目，可能需要Polyfill或使用其他DOM操作方法。