琴& 2019-01-17 11:00 采纳率: 75%
浏览 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条回答 默认 最新

      报告相同问题？

      相关推荐 更多相似问题

      悬赏问题

      • ¥200 把公众号页面和文章，嵌入到其他平台！就像搬家一样！
      • ¥20 matlab编程问题。详情如下，利用chatgpt写的代码总是达不到要求。
      • ¥15 matlab画三维流场
      • ¥100 IIC通讯数据算法分析
      • ¥15 matlab 绘制涡流场
      • ¥15 依存句法分析如何与BERT模型及GCN相结合
      • ¥66 有偿收一个会Python 与unitysocket通信，会简单mediapipe手势识别的哥
      • ¥15 药店卖药设计使利润最大
      • ¥15 模拟银行实现VIP服务
      • ¥20 ECU在实车上can通讯失败或不稳定