【淡入淡出型菜单】为什么执行不了?
<!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个回答

offsetHeight,拼写错误

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐