用加速度方式改变盒子的大小

最新推荐文章于 2022-12-28 09:16:38 发布

木子松的猫

最新推荐文章于 2022-12-28 09:16:38 发布

阅读量243

点赞数

分类专栏：【前端】-- BS 【前端】-- JS 文章标签： js改变盒子的高度菜单折叠

本文链接：https://blog.csdn.net/ldb987/article/details/78831039

版权

【前端】-- BS 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

【前端】-- JS

8 篇文章 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>
    <style type="text/css">
        #dv {
            width:80px;
            height:200px;
            border:1px solid black;
            overflow:hidden; /*超出这个范围隐藏*/            
        }
    </style>
    <script type="text/ecmascript">
        //div高度变化，比如菜单折叠
        onload = function () {
            document.getElementById("btn1").onclick = function () {
                var div = document.getElementById("dv");
                //首先获得高度
                var h = div.offsetHeight;
                //利用计时器
                var intervalId = setInterval(function () {
                    //每次变化递减一个单位
                    h--;
                    if (h <= 0) {
                        //停下计时器
                        clearInterval(intervalId);
                        //隐藏这个框
                        div.style.display = "none";
                    }
                    div.style.height = h + "px";
                }, 20)           
            };
        };

    </script>
</head>
<body>
    <input type="button" name="name" value="文件" id="btn1" />    
    <div id="dv">
        新建<br />
        打开<br />
        关闭<br />
        设置<br />      
    </div>
</body>
</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>
    <style type="text/css">
        #dv {
            width:80px;
            height:200px;
            border:1px solid black;
            overflow:hidden; /*超出这个范围隐藏*/            
        }
    </style>
    <script type="text/ecmascript">
        //div高度变化，比如菜单折叠
        onload = function () {
            document.getElementById("btn1").onclick = function () {
                var div = document.getElementById("dv");
                //首先获得高度
                var h = div.offsetHeight;
                //利用计时器
                //利用计时器，每20毫秒变化一次
                var intervalId = setInterval(function () {
                    //获得div高度
                    var h = parseInt(div.style.height || div.offsetHeight)
                    //每次应该减去的高度（用加速度来递减高度）
                    var delta = Math.ceil(h / 10);
                    h = h - delta;
                    if (h <= 0) {
                        clearInterval(intervalId);//停止计时器
                        div.style.display = "none";//隐藏div
                    }
                    div.style.height = h - delta + "px";
                }, 20)
            };
        };

    </script>
</head>
<body>
    <input type="button" name="name" value="文件" id="btn1" />    
    <div id="dv">
        新建<br />
        打开<br />
        关闭<br />
        设置<br />      
    </div>
</body>
</html>

木子松的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
18
评论
用加速度方式改变盒子的大小

通常我们看到的菜单是点击显示，鼠标离开立马消失。我们也可以利用计时器，让显示出来的菜单匀速或加速度消失。每次递减一个单位 #dv { width:80px; height:200px; border:1px solid black; ov
复制链接

扫一扫