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

时间：2016-07-04 20:36:52 阅读：225 评论：0 收藏：0 [点我收藏+]

<!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>

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

原文：http://www.cnblogs.com/123lucy/p/5641496.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)