首页 > 代码库 > 通过js控制层的动态隐藏

通过js控制层的动态隐藏

2024-10-08 22:36:02   214人阅读

 <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 = http://www.mamicode.com/‘显示‘;
                } else {
                    dvobj.style.display = ‘‘;
                    this.value = http://www.mamicode.com/‘隐藏‘;
                }
               
            }
        }
    </script>
</head>
<body>
    <input type="button" name="name" value="http://www.mamicode.com/隐藏"id="btn1" />
    <input type="button" name="name" value="http://www.mamicode.com/通过动画隐藏" id="btn2" />
    <input type="button" name="name" value="http://www.mamicode.com/通过动画显示" id="btn3" />

    <div id="dv1">
        <img src="http://www.mamicode.com/Images/QQ图片20170619233404.jpg" />
    </div>

 

通过js控制层的动态隐藏


联系
我们