声明:该小作品目前存在bug,后续会有解决
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>伸缩菜单之淡入淡出</title> <style> *{margin:0;padding:0;} #ul1 li{list-style:none;float:left;width:100px;height:20px; line-height: 20px;text-align: center;background: greenyellow; position: relative;border:#000000 1px solid;} #ul1 li div{width:100%;overflow: hidden;height:0; position: absolute;top:20px;background: aqua; filter:alpha(opacity:0);opacity:0;} </style> <script src="move+1.jsh"></script> <script> window.onload=function(){ var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); var i=0; for(i=0;i<aLi.length;i++){ aLi[i].onmouseover=function() { var oDiv=this.getElementsByTagName('div')[0]; oDiv.style.height="auto"; //alert(oDiv.offsetHeight); var iHeight=oDiv.offsetHeight; oDiv.style.height=0; startMove(oDiv,{height:iHeight,opacity:100}); }; aLi[i].onmouseout=function() { var oDiv=this.getElementsByTagName('div')[0]; startMove(oDiv,{height:0,opacity:0}) } } } </script> </head> <body> <ul id="ul1"> <li> 首页 <div> 首页1<br> 首页2<br> 首页3<br> </div> </li> <li> 产品 <div> 产品1<br> 产品2<br> 产品3<br> </div> </li> <li> 我的 <div> 我的1<br> 我的2<br> 我的3<br> </div> </li> </ul> </body> </html>
1、移不到div里面
2、频繁滑入滑出会卡
3、还需要阻止冒泡等一系列完善