伸缩菜单（同时淡入淡出）

最新推荐文章于 2023-08-19 10:26:35 发布

大海和云朵

最新推荐文章于 2023-08-19 10:26:35 发布

阅读量318

点赞数

分类专栏： JS小作品

本文链接：https://blog.csdn.net/qq_29592901/article/details/52232516

版权

JS小作品专栏收录该内容

7 篇文章 0 订阅

订阅专栏

声明：该小作品目前存在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>