下拉菜单（缓慢移出收缩）

Posted 露西&哈特菲利亚

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉菜单（缓慢移出收缩）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="d1" class="div1" style="position: relative; width: 100px; height: 25px; background-color: red; float: left; margin-left: 5px; overflow: hidden;">
        <div id="d1_d1" class="dd1" style="position: relative; top: 25px; width: 100px; height: 200px; background-color: blue;">
        </div>
    </div>
    <div id="d2" class="div1" style="position: relative; width: 100px; height: 25px; background-color: red; float: left; margin-left: 5px; overflow: hidden;">
        <div id="d2_d2" class="dd1" style="position: relative; top: 25px; width: 100px; height: 200px; background-color: blue;">
        </div>
    </div>
    <div id="d3" class="div1" style="position: relative; width: 100px; height: 25px; background-color: red; float: left; margin-left: 5px; overflow: hidden;">
        <div id="d3_d3" class="dd1" style="position: relative; top: 25px; width: 100px; height: 200px; background-color: blue;">
        </div>
    </div>
    <script>
        var timer1 = null;
        var div1 = document.getElementById("d1");
        dong(div1, timer1);

        var timer2 = null;
        var div2 = document.getElementById("d2");
        dong(div2, timer2);

        var timer3 = null;
        var div3 = document.getElementById("d3");
        dong(div3, timer3);

        function dong(div, timer) {
            div.onmouseover = function () {
                if (div.offsetHeight < 220) {
                    clearInterval(timer);
                    timer = window.setInterval(function () {
                        div.style.height = (div.offsetHeight + 10) + ‘px‘;
                        if (div.offsetHeight >= 225) {
                            clearInterval(timer);
                        }
                    }, 20);
                }
            };
            div.onmouseout = function () {
                if (div.offsetHeight > 25) {
                    clearInterval(timer);
                    timer = window.setInterval(function () {
                        div.style.height = (div.offsetHeight - 10) + ‘px‘;
                        if (div.offsetHeight <= 25) {
                            clearInterval(timer);
                        }
                    }, 50);
                }
            };
        }
    </script>
</body>
</html>

 

以上是关于下拉菜单（缓慢移出收缩）的主要内容，如果未能解决你的问题，请参考以下文章

鼠标移出时子导航下拉菜单停用

菜单栏子菜单缓慢下拉回收效果

仿新浪下拉菜单

利用JavaScript+DIV+CSS实现下拉菜单。当鼠标移动到菜单选项的时候显示对应的DIV：function show(menu)。当鼠标移出的时候隐藏所有的DIV：function hide(

jQuery动态添加多级收缩菜单

css怎么写下拉和收缩·下拉已经写好，收不上去？