【淡入淡出型菜单】为什么执行不了？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淡入淡出型伸缩菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #ul1 li {
            width: 100px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            position: relative;
            float: left;
            list-style: none;
            background-color: #9F3;
            border: 1px solid #660;
        }

        #ul1 li div {
            background-color: black;
            overflow: hidden;
            height: 0;
            position: absolute;
            top: 20px;
            width: 100%;
            opacity: 0;
            filter: alpha(opacity=0);
        }

        span {
            display: block;
        }
    </style>

    <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';
                    var iHeight = oDiv.offetHeight;
                    oDiv.style.height = 0; //从零开始展开

                    startMove(oDiv, {
                        opacity: 100,
                        height: iHeight
                    });
                };

                aLi[i].onmouseout = function () {
                    var oDiv = this.getElementsByTagName('div')[0];

                    oDiv.style.height = 'auto';
                    var iHeight = oDiv.offetHeight;
                    oDiv.style.height = 0;

                    startMove(oDiv, {
                        opacity: 0,
                        height: 0
                    });
                };
            }
        }

        //框架

        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }

        function startMove(obj, json, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var bStop = true; //所有值都已经到达
                for (var attr in json) {
                    //去当前值
                    var iCur = 0;

                    if (attr == 'opacity') {
                        iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        iCur = parseInt(getStyle(obj, attr));
                    }

                    //算速度
                    var iSpeed = (json[attr] - iCur) / 8;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                    //检测停止
                    if (iCur != json[attr]) {
                        bStop = false;
                    }

                    if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; //优先级
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    } else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                }

                if (bStop) {
                    clearInterval(obj.timer);

                    if (fn) {
                        fn();
                    }
                }
            }, 30)
        }
    </script>
</head>

<body>
    <ul id="ul1">
        <li>
            布局
            <div>
                这里是布局
                <span>这里是布局</span>
                这里是布局
                <span>这里是布局</span>
            </div>
        </li>
        <li>
            布局
            <div>
                这里是布局<br />
                <span>这里是布局</span>
                这里是布局
                <span>这里是布局</span>
            </div>
        </li>
        <li>
            布局
            <div>
                这里是布局
                <span>这里是布局</span>
                这里是布局
                <span>这里是布局</span>
            </div>
        </li>
    </ul>
</body>

</html>

展开全部

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
`奋力前行 2019-01-17 03:30
关注
offsetHeight,拼写错误

本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报
编辑

预览
轻敲空格完成输入
显示为

卡片

标题

链接
评论

按下Enter换行，Ctrl+Enter发表内容

编辑

预览

报告相同问题？

关注问题

如何为弹框添加淡入淡出效果？ css css3 动画
2018-10-31 23:41

回答 2 已采纳参考与：https://blog.csdn.net/codeTnt/article/details/81030077 已经亲测可用，可以直接赋值粘贴用。如果有帮助请**采纳**！谢谢。 ```
jQuery的淡入淡出问题 jquery
2022-08-04 08:50

回答 2 已采纳 fade-out 结束的时候 display:none,而不是visibility:hidden, 或者opacity:0, display:none 相当于删除了元素，原有的位置上不占据空间，自然会
unity canvas group 改变alpha实现场景切换淡入淡出时，显示效果不完整。 unity
2022-08-23 09:31

回答 2 已采纳看你的描述应该是animation里面有修改透明度的动画帧，和canvas group冲突了
jquery实现的淡入淡出下拉菜单效果
2020-10-23 09:41

为了实现基于jQuery的淡入淡出效果的下拉菜单，我们需要了解jQuery的基本操作，包括如何动态地为DOM元素添加和删除属性，以及如何利用CSS来控制下拉菜单的样式和动画效果。在此基础上，我们还需要掌握如何使用jQuery...
小程序怎么实现一条文字循环的淡入淡出的动画前端动画小程序有问必答
2021-11-30 07:04

回答 3 已采纳用css3动画搞下就好了，设置下opacity, 代码片段： http
MFC 实现启动画面淡入淡出的问题 c++ mfc
2016-03-04 22:49

回答 6 已采纳不用那么麻烦，最简单的做法是定时器循环调用 SetLayeredWindowAttributes http://baike.baidu.com/link?url=D8_84M_5ZKBL4eb
Android 如何修改并输出一个首尾有淡入淡出效果的音频文件？
2016-07-21 22:09

回答 2 已采纳过去很久的了，关闭问题了。
jQuery淡入淡出下拉菜单.zip
2022-11-20 14:08

2. 在CSS文件中，为菜单项和下拉子菜单设置样式，以及定义淡入淡出的过渡效果。 3. 在JavaScript文件中，通过jQuery选择器找到下拉菜单元素，添加事件监听器（如hover或click），当触发事件时调用fadeIn()和fadeOut...
安卓开发问题怎么写淡入淡出的动画 android
2016-06-14 02:04

回答 6 已采纳 public class MainActivity extends Activity implements View.OnClickListener{ private TextView[] tv;
如何实现类似于QQ的淡入淡出右下角提示框效果？
2010-01-24 03:47

回答 4 已采纳我个人建议你学习一下EXTJS！这个就可以实现这个效果呀！
android 如何修改音频文件实现播放淡入淡出效果
2016-07-18 17:43

回答 3 已采纳你可以到关闭的时候，渐渐把声音设置小点就行了，我记得可以设置
CSS3淡入淡出Tab菜单.zip
2022-11-16 13:21

在前端开发中，创建交互式的用户界面是至关重要的，而CSS3淡入淡出Tab菜单是一种常见的实现方式，它能够提供优雅的用户体验。这个压缩包文件"CSS3淡入淡出Tab菜单.zip"包含了实现这一功能的相关代码资源，主要涉及...
纯CSS3实现淡入淡出下拉菜单.zip
2022-11-25 02:22

在这个项目中，“纯CSS3实现淡入淡出下拉菜单”提供了一种优雅的方式，利用CSS3的特性来创建一个无需JavaScript插件的动态下拉菜单。这个压缩包包含了实现这一功能的所有文件，让我们一起深入了解一下其中涉及的关键...
jQuery淡入淡出下拉菜单特效代码
2021-03-19 20:58

"jQuery淡入淡出下拉菜单特效代码"就是一个典型的例子，它利用jQuery的动画效果来提升网站导航菜单的视觉吸引力。这个特效的核心在于，当用户将鼠标悬停在主菜单项上时，下拉菜单会以淡入的方式出现，而不是突然跳...
jQuery 淡入淡出、展开收缩菜单实现代码
2020-10-29 03:51

本示例中，我们关注的是如何使用jQuery来实现一个具有淡入淡出效果和展开收缩功能的菜单。首先，让我们分析给定的代码片段。在HTML部分，可以看到一个无序列表`<ul>`，其中包含一个带有`class="menu"`的`<li>`元素...
jQuery淡入淡出多级下拉动画菜单.rar
2023-10-01 15:54

【jQuery淡入淡出多级下拉动画菜单】是一种常见的网页交互设计，广泛应用于网站导航栏，提升用户体验。这个特效代码基于JavaScript库jQuery实现，利用CSS样式和HTML结构，为菜单项添加动态的淡入淡出效果，同时支持...
js+vue,前端关于页面滚动让头部菜单淡入淡出实现原理
2023-09-04 15:29

元强网络的博客 js+vue,前端关于页面滚动让头部菜单淡入淡出实现原理
没有解决我的问题, 去提问

【淡入淡出型菜单】为什么执行不了？

1条回答 默认 最新

1条回答默认最新