延时提示框本质代码

最新推荐文章于 2025-06-14 11:03:26 发布

原创最新推荐文章于 2025-06-14 11:03:26 发布 · 721 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#延时 #菜单

javascript 专栏收录该内容

66 篇文章

订阅专栏

　　目前，网上导航菜单弹出子菜单的效果已经普及，但是有的网站做得还不够精细，用户体验并不是很好，比如从子菜单转到主菜单时，有时子菜单会出现跳跃，即：子菜单从有到无，再从无到有，从而出现了这些小bug。

　　最近，重新写了一下这个小效果，布局方面即主菜单div1和子菜单div2,js代码方面用到了定时器，让子菜单的隐藏动作不完成的太快速，而是通过定时器给它一个延时，这期间如果有要继续让它显示的动作，则把定时器清除。最终整理代码时的经验：

　　1.子菜单显示必须马上，且同时清空一下隐藏子菜单的定时器；

　　2.子菜单隐藏不能马上，必须延时，方便调用鼠标的其他事件。

具体HTML代码如下：

    <div id="div1">我的应用</div>
    <div id="div2">
        <ul>
            <li>魔兽</li>
            <li>拳皇</li>
            <li>反恐</li>
        </ul>
    </div>

CSS:

        div {
            float:left;
            margin:10px;
        }
        #div1{
            font-size:20px;
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            color:white;
            background-color:red;
        }
        #div2{
            width:150px;
            height:100px;
            background-color:green;
            color:white;
            display:none;
        }

Javascript:

            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            var timer = null;

            oDiv1.onmouseover = oDiv2.onmouseover = function () {
                clearTimeout(timer);
                oDiv2.style.display = 'block';
            };

            oDiv1.onmouseout = oDiv2.onmouseout = function () {
                timer = setTimeout(function () {
                    oDiv2.style.display = 'none';
                }, 600);
            };

看上去很简单，考虑不周全，小bug还是很难搞。