当前位置：首页 > news >正文

导航特效 JS一键实现hover文本打乱效果

news 2026/5/11 23:43:54

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

这种效果不用复杂的框架，纯原生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;
}