使用JavaScript实现伸缩型菜单效果

实现原理与目标

伸缩型菜单的核心在于根据用户行为动态改变 HTML 元素的宽幅。当鼠标移入时，菜单项从最小宽度平滑过渡到最大宽度；当鼠标离开时，则反向收缩。本示例采用原生 JavaScript 实现，不依赖任何外部库，重点展示 DOM 遍历、事件绑定及基于时间间隔的样式修改逻辑。

完整代码实现

以下是包含 HTML 结构、CSS 样式和 JavaScript 逻辑的完整示例。代码将创建一组彩色菜单项，点击或悬停时可触发宽度变化效果。

第1步：构建 HTML 结构与基础样式

首先定义菜单容器 #con，并在其中放置多个 <div> 作为菜单项。为每个菜单项设置初始宽度、高度及文字颜色，确保视觉上的统一性。

<html>
<head>
<title>真正的JavaScript伸展收缩型菜单</title>
<style type="text/css">
/* 容器内所有div的基础样式 */
#con div{
  width:100px;
  margin:5px 0 5px 0;
  font-size:9pt;
  height:23px;
  color:white;
}
</style>
</head>
<body>
<div id="con">
  <div style="background-color:red">红色菜单</div>
  <div style="background-color:green">绿色菜单</div>
  <div style="background-color:blue">蓝色</div>
  <div style="background-color:yellow">黄色</div>
  <div style="background-color:pink">这是什么色</div>
  <div style="background-color:orange">桔色</div>
  <div style="background-color:black">黑色超酷</div>
</div>
</body>
</html>

第2步：编写 JavaScript 伸缩逻辑

在脚本中，我们定义了一个通用函数 roulMenu，接受容器ID、最大宽度和最小宽度三个参数。该函数遍历容器内的所有 <div> 元素，并为每个元素绑定 onmouseover 和 onmouseout 事件。利用 setInterval 逐像素调整宽度，实现平滑动画效果。

<script language="javascript">
// 简化版getElementById封装
function $(e){return document.getElementById(e);}

/**
 * 初始化伸缩菜单
 * @param {string} e - 容器ID
 * @param {number} maxW - 展开时的最大宽度
 * @param {number} minW - 收起时的最小宽度
 */
function roulMenu(e, maxW, minW) {
  var divs = $(e).getElementsByTagName('div');
  for(var i=0; i<divs.length; i++) {
    (function(){
      var tims, timss;
      
      // 鼠标移入：展开
      divs[i].onmouseover=function(){
        var self = this;
        clearInterval(timss); // 清除收起定时器
        tims=setInterval(function(){
          if(self.offsetWidth < maxW){
            self.style.width = self.offsetWidth + 5 + 'px';
          } else {
            clearInterval(tims);
          }
        }, 10);
      }

      // 鼠标移出：收缩
      divs[i].onmouseout=function(){
        var self = this;
        clearInterval(tims); // 清除展开定时器
        timss=setInterval(function(){
          if(self.offsetWidth > minW){
            self.style.width = self.offsetWidth - 5 + 'px';
          } else {
            clearInterval(timss);
          }
        }, 10);
      }
    })();
  }
}
// 使用方法：初始化ID为'con'的容器，最大宽200px，最小宽100px
roulMenu('con', 200, 100);
</script>

运行上述代码后，你将看到如下视觉效果预览：

注意事项与优化建议

• 性能考量：原代码使用 setInterval 进行动画帧更新，这在现代浏览器中可能不如 requestAnimationFrame 高效。对于更流畅的体验，建议升级动画引擎或使用 CSS3 transition 属性替代 JS 定时计算。
• 作用域管理：代码中使用了立即执行函数表达式（IIFE）来保持每次循环中变量的独立作用域，避免闭包陷阱导致所有菜单项共享同一个计时器变量。
• 样式分离：实际项目中，建议将 CSS 样式移至外部文件或 <style> 标签中，而非内联在 HTML 元素上，以保持代码整洁和易于维护。

以上就是使用JavaScript实现伸缩型菜单的详细步骤与代码解析。更多关于前端交互特效的资料请关注本站其它相关文章！