不知道大家有没有见过这种高级感满满的导航效果：鼠标悬停在导航文字上，文字会先变成乱码一样的随机字符，再慢慢还原成原本的样子，低调又有设计感。

这种效果不用复杂的框架，纯原生JS+CSS就能实现，不管是用在个人博客、官网导航，还是按钮交互上，都能瞬间提升页面质感。今天就把完整教程+带注释源码分享给大家，新手也能直接复制使用。

先简单说下核心逻辑：给导航a标签绑定鼠标悬停事件，悬停时通过定时器，让文字从第一个字符开始，逐步将随机字符替换为原始文本，达到“打乱→还原”的动态效果，CSS则负责页面布局和hover时的颜色变化，整体实现起来非常简单。

完整源码

HTML文件（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 Javascript 实现文本打乱效果</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <ul>
        <li><a href="#" data-text="Home"></a></li>
        <li><a href="#" data-text="About">About</a></li>
        <li><a href="#" data-text="Hover To Scramble Me">Hover To Scramble Me</a></li>
        <li><a href="#" data-text="Services">Services</a></li>
        <li><a href="#" data-text="Our Team">Our Team</a></li>
        <li><a href="#" data-text="Contact Us">Contact Us</a></li>
    </ul>

    <script>
        document.querySelectorAll('ul li a').forEach(element => {
            let randomChars = "!@#$%^&*()_+-<>?";
            let originalText = element.dataset.text;

            element.addEventListener('mouseover', () => {
                let iterations = 0;
                let interval = setInterval(() => {
                    element.textContent = originalText.split("").map(
                        (char, index) => {
                            if (index < iterations) return char;
                            return randomChars.charAt(Math.floor(Math.random() * randomChars.length));
                    })
                    .join("");
                    if (iterations >= originalText.length) {
                        clearInterval(interval);
                    }
                    iterations += 1/ 3;
                },50)
            })
        })
    </script>
</body>
</html>

CSS文件（style.css）

/* 初始化页面样式，清除默认边距，避免布局错乱 */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面主体样式：让导航栏垂直居中显示 */
body {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-height: 100vh; /* 让body占满整个屏幕高度 */
  background: #222; /* 深色背景，突出白色文字和绿色hover效果 */
}

/* 导航列表样式：垂直排列，居中显示 */
ul {
  position: relative;
  display: flex;
  flex-direction: column; /* 垂直排列导航项 */
  text-align: center; /* 文字水平居中 */
}

/* 清除列表默认圆点 */
ul li {
  position: relative;
  list-style: none; /* 去掉li前面的圆点 */
}

/* 导航链接样式：美化文字 */
ul li a {
  position: relative;
  font-size: 3em; /* 文字大小，可修改 */
  color: #fff; /* 默认文字白色 */
  text-decoration: none; /* 去掉下划线 */
  letter-spacing: 0.05em; /* 文字间距，增加高级感 */
  cursor: pointer; /* 鼠标放上去显示手型 */
  transition: 0.5s; /* 颜色过渡，让hover颜色变化更柔和 */
}

/* 鼠标悬停时，文字变绿色（可自行修改颜色） */
ul li a:hover{
  color: #69ff41;
}

使用说明（新手必看）

  1. 新建两个文件，分别命名为 index.html 和 style.css ，放在同一个文件夹里；
  2. 把上面对应的代码复制到两个文件中，保存后，用浏览器打开 index.html ，就能看到效果；
  3. 可自行修改的地方：
  • 随机字符：修改JS里的randomChars，比如添加字母、数字，打乱效果更丰富；
  • 颜色：修改CSS里的background（背景色）和hover时的color（文字颜色）；
  • 速度：修改JS里的定时器间隔（50）和iterations增加的数值（1/3），数值越大，还原越快；
  • 导航文本：修改a标签的data-text和标签内的文本，替换成自己需要的导航内容。

这个效果的核心就是“定时器+字符遍历替换”，没有复杂的语法，复制源码就能用，不管是练手还是实际项目中使用，都非常合适。大家可以根据自己的需求修改样式，打造属于自己的专属导航特效

本文由mdnice多平台发布

标签: none

添加新评论