通过js控制层的动态隐藏

最新推荐文章于 2024-01-16 08:55:41 发布

Surenon

最新推荐文章于 2024-01-16 08:55:41 发布

阅读量163

点赞数

原文链接：http://www.cnblogs.com/shapaozi/p/7051230.html

版权

 <style type="text/css">
        #dv1{
            width:1000px;
            height:1000px;
            overflow:hidden;
            display:none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('btn2').onclick = function () {
                //1启动计时器
               var inter= setInterval(function () {
                    //2获取要操作的层
                    var dvobj = document.getElementById('dv1');
                    //3高度递减
                    var h = dvobj.offsetHeight;
                    h -= 3;
                    if (h <= 0) {
                        h = 0;
                        //4把新的高度设置给层
                        dvobj.style.height = h + 'px';
                        dvobj.style.display = 'none';
                        clearInterval(inter);
                    } else {
                        dvobj.style.height = h + 'px';
                    }
                },100)
                
            }
        
            document.getElementById('btn1').onclick = function () {
                var dvobj = document.getElementById('dv1');
                
                if(dvobj.style.display.length==0){
                    dvobj.style.display = 'none';
                    this.value = '显示';
                } else {
                    dvobj.style.display = '';
                    this.value = '隐藏';
                }
               
            }
        }
    </script>
</head>
<body>
    <input type="button" name="name" value="隐藏"id="btn1" />
    <input type="button" name="name" value="通过动画隐藏" id="btn2" />
    <input type="button" name="name" value="通过动画显示" id="btn3" />

    <div id="dv1">
        <img src="Images/QQ图片20170619233404.jpg" />
    </div>

转载于:https://www.cnblogs.com/shapaozi/p/7051230.html

Surenon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过js控制层的动态隐藏

<style type="text/css"> #dv1{ width:1000px; height:1000px; overflow:hidden; display:none; } </style> ...
复制链接

扫一扫