<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控制层的动态隐藏的更多相关文章

  1. js控制TR的显示隐藏

    在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,如何控制,本文为大家揭晓 下文分享的一段代码:选择是的按钮就显示身高和体重的文本框的代码.注意:r ...

  2. js控制div显示与隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js控制ul的显示隐藏，对象的有效范围

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js控制tr 隐藏 显示

    tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...

  5. 再探 Ext JS 6 (sencha touch/ext升级版) 变化篇 (编译命令、滚动条、控制层、模型层、路由)

    从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化 首先从cmd说起,cmd 6 中sencha app build package不能使用了,se ...

  6. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  7. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  8. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  9. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

随机推荐

  1. npm更换为镜像

    背景:npm在安装的过程中需用从国外的网站获取代码,速度非常慢,因此更换为淘宝镜像,提升速度. 1.永久起作用: npm config set registry https://registry.ta ...

  2. GitHub+Hexo 搭建个人网站详细教程

    原文链接 GitHub+Hexo 搭建个人网站详细教程 前言: 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷.然后,如果你是一个不甘寂寞的程序猿(媛),是否也想要搭建 ...

  3. StackOverflow: 你没见过的七个最好的Java答案

    StackOverflow发展到目前,已经成为了全球开发者的金矿.它能够帮助我们找到在各个领域遇到的问题的最有用的解决方案,同时我们也会从中学习到很多新的东西.这篇文章是在我们审阅了StackOver ...

  4. pycharm 不显示代码提示

    1.检查是否代码本身有问题. 2.检查代码提示是否成功开启. 3.检查IDE省电模式是否关闭状态. 4.使用快捷键:ctrl+j.ctrl+space.alt+/ 其他(不能安装): 1.检查是否Py ...

  5. Linux里的用户管理

    在linux中系统中,它并不认识帐号名称.它认识的是我们的帐号ID,帐号ID保存在/etc/passwd文件中.我们在登录linux主机时,在输入完帐号和密码时,linux会先查找/etc/passw ...

  6. C语言中静态断言的使用

    编写代码时,我们总是会做出一些假设,断言就是用于在代码中捕捉这些假设,可以将断言看作异常处理的高级形式,用于代码调试. #define _CRT_SECURE_NO_WARNINGS //关闭安全监察 ...

  7. 3. C/C++笔试面试经典题目三

    64. 如何打印出当前源文件的文件名以及源文件的当前行号? [参考答案]cout << __FILE__ ; cout<<__LINE__ ; __FILE__和__LINE_ ...

  8. hexo博客的相关配置

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 前面两节讲解了hexo博客的搭建以及jacman主题的配置,这节主要讲解博客的一些相关配置.比如404页面,图床,自定义页面,个人网站绑定(重要的 ...

  9. HBASE常用操作增删改查

    http://javacrazyer.iteye.com/blog/1186881 http://www.cnblogs.com/invban/p/5667701.html

  10. AtCoder - 2565 枚举+贪心

    There is a bar of chocolate with a height of H blocks and a width of W blocks. Snuke is dividing thi ...