在前端开发中，实现动画效果是非常常见的需求。本文将分享一个用 JavaScript 实现打字效果的动态菜单代码，并提供详细解释和示例代码。
动态菜单的实现
在实现动态菜单之前，需要先准备好 HTML 和 CSS 代码。以下是一个简单的菜单结构：
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>使用 CSS 样式为菜单添加样式：
-- -------------------- ---- ------- --- - ----------------- ----- ------ ----- - --- -- - ----------- ----- -------- -- ------- -- -------- ----- - --- -- - ------------- ----- - --- - - ------ ----- ---------------- ----- ---------- ----- ----------- --- ---- ------------ - --- ------- - ------ ----- -
这个菜单看起来很普通，但我们将使用 JavaScript 将它变成打字效果的动态菜单。
首先，我们需要将菜单项文字隐藏起来，并使用 JS 来控制它们如何显示：
nav li span {
display: none;
}接下来，我们创建一个函数，将每个菜单项的文本内容分解为字符并逐个显示出来：
-- -------------------- ---- -------
-------- --------------- -
----- ------- - -------------------------
------------ - ---
------------------------ ------ -- -
------------- -- -
------------ -- -------
-- ----- - -----
---
-这个函数首先将元素的文本内容划分为字符数组，然后依次将它们添加回到元素。setInterval() 函数的参数用于设置每个字符之间的延迟时间，以此来实现打字效果。
最后，我们需要调用这个函数，并将菜单项的 span 元素作为其参数，以确保正确地显示每个菜单项的文本内容：
const navItems = document.querySelectorAll("nav li a");
navItems.forEach((item) => {
typeLetters(item.querySelector("span"));
});示例代码
以下是完整的 HTML、CSS 和 JavaScript 代码，你可以将它们复制到你的项目中进行测试：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- ---------------------------- ----------------- --
----- --------------- ---------------------------- ------------------ --
------------- ------ ------------
-------
--- -
----------------- -----
------ -----
-
--- -- -
----------- -----
-------- --
------- --
-------- -----
-
--- -- -
------------- -----
-
--- - -
------ -----
---------------- -----
---------- -----
----------- --- ---- ------------
-
--- ------- -
------ -----
-
--- -- ---- -
-------- -----
-
--------
-------
------
-----
----
------ -----------------------------------
------ -------------------- ------------------
------ ---------------------------------------
------ ---------------------- ------------------
-----
------
--------
-------- --------------- -
----- ------- - -------------------------
------------ - ---
------------------------ ------ -- -
------------- -- -
------------ -- -------
-- -----
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------