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

最新推荐文章于 2021-03-20 17:02:37 发布

weixin_30362083

最新推荐文章于 2021-03-20 17:02:37 发布

阅读量223

点赞数

文章标签： xhtml

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

版权

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

转载于:https://www.cnblogs.com/123lucy/p/5641496.html

weixin_30362083

关注

0
点赞
踩
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&g...
复制链接

扫一扫