码迷,mamicode.com
首页 > Web开发 > 详细

通过js控制层的动态隐藏

时间:2017-06-20 01:02:07      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:div   blog   动画   load   obj   asc   java   interval   启动   

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

 

通过js控制层的动态隐藏

标签:div   blog   动画   load   obj   asc   java   interval   启动   

原文地址:http://www.cnblogs.com/shapaozi/p/7051230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!