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

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

 

posted @ 2016-07-04 19:30  露西&哈特菲利亚  阅读(223)  评论(0)    收藏  举报