JavaScript实现鼠标悬停伸展收缩菜单的完整代码

实现原理

该菜单的核心在于监听 DOM 元素的 mouseover（鼠标移入）和 mouseout（鼠标移出）事件。当触发这些事件时，使用 setInterval 定时器每 10 毫秒执行一次宽度增减操作，直到达到设定的最大或最小宽度值后清除定时器，从而形成流畅的“呼吸”式伸缩视觉效果。

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

首先创建一个容器用于存放菜单项，并为容器设置初始尺寸限制。每个子项作为独立的菜单按钮，需赋予固定高度与内边距，确保内容居中显示。

1. 创建父级容器 <div id="con">，用于包裹所有菜单项。
2. 内部嵌套多个 <div> 元素，分别添加不同的背景色以便区分。
3. 编写 CSS 样式，统一设置菜单项的 width:100px、height:23px、字体大小及颜色，并预留 5px 的上下外边距以保持间距。

第2步：编写JavaScript动画逻辑

定义一个通用函数 roulMenu(containerId, maxWidth, minWidth)，参数依次为容器 ID、展开后的最大宽度和折叠后的最小宽度。

• 获取元素：通过 document.getElementById 找到目标容器，并使用 getElementsByTagName('div') 选取所有子菜单项。
• 绑定事件：使用 IIFE（立即执行函数）为每个子项独立绑定鼠标事件，避免循环闭包问题。
• 展开动画：在 onmouseover 事件中，启动一个正向递增的定时器，每次将当前宽度增加 5px，直到等于 maxWidth 为止。
• 收回动画：在 onmouseout 事件中，启动一个负向递减的定时器，每次将当前宽度减少 5px，直到等于 minWidth 为止。
• 资源清理：在切换状态前，务必调用 clearInterval 清除可能残留的旧定时器，防止多重动画叠加导致页面卡顿。

完整源代码示例

以下为可直接复制运行的完整代码片段，包含 HTML、CSS 和 JavaScript 部分。

<html>
<head>
<title>真正的JavaScript伸展收缩型菜单</title>
<style type="text/css">
#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>
<script language="javascript">
function $(e){return document.getElementById(e);}
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);
  }
 })();
 }
}
//使用方法
roulMenu('con',200,100);
</script> 
</body>
</html>

注意事项

由于此段代码较老，使用了 language="javascript" 属性且未规范闭合 <html> 标签（如缺少 </head>）。在实际生产环境中建议遵循现代 HTML5 标准规范进行修正，例如补全文档结构，并将脚本移至底部以提升加载性能。此外，若需要兼容移动端点击交互，还需额外补充 touchstart 等手势事件的处理逻辑。

以上就是JavaScript实现鼠标悬停伸展收缩菜单代码的详细内容，更多关于JavaScript前端特效开发的资料请关注本站其它相关文章！