琴& 2019-01-17 11:00 采纳率: 50%
浏览 387
已采纳

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

<!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>
  • 写回答

1条回答 默认 最新

  • `奋力前行 2019-01-17 11:30
    关注

    offsetHeight,拼写错误

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

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?