<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. 类1(this指针/const成员函数/类作用域/外部成员函数/返回this对象的函数)

    假设我们要设计一个包含以下操作的 Sales_data 类: 1.一个 isbn 成员函数,用于返回对象的 book_no 成员变量 2.一个 combine 成员函数,用于将一个 Sales_dat ...

  2. 在libuv中使用openssl建立ssl连接

    在libuv中使用openssl建立ssl连接 @(blogs) 使用openssl进行加密通信时,通常是先建立socket连接,然后使用SSL_XXX系列函数在普通socket之上建立安全连接,然后 ...

  3. SQL语句优化 -- 以Mysql为例

     本文参考下面的文章:    1: [真·干货]MySQL 索引及优化实战 2:  Mysql语句的执行过程 3:  sql优化的几种方法 我将  sql语句优化分为三个方面,(此处不包括 业务逻辑的 ...

  4. Wiki凭什么持续得到开发人员和团队的喜爱

    大家好,我是华为云DevCloud项目管理服务的产品经理恒少,作为布道师和产品经理,出差各地接触客户是常态,线下和华为云的客户交流.布道.技术沙龙. 但是线下交流,覆盖的用户总还是少数.我希望借助线上 ...

  5. 2、Numpy常用函数

    创建单位矩阵和读写文件使用eye()创建单位矩阵 # -*- coding: utf-8 -*- import numpy as np i = np.eye(3) print(i) 结果: [[ 1. ...

  6. [HNOI/AHOI2018]排列

    [Luogu4437] 如果\(a[i]=j\)则序列\(p[]\)中\(j\)必须排在\(i\)前面,如果\(j\)不在范围内则不管,求一个式子\(\sum_{i=1}^n iw_{p[i]}\)的 ...

  7. 洛谷P2501 bzoj1049 [HAOI2006]数字序列

    题目链接 bzoj 洛谷 题解 第一问: 假如 \(i < j\) 如果 \(j\)能从\(i\)转移过来 显然中间空隙必须足够 例如:\(50\) \(53\) \(53\) \(52\) 就 ...

  8. 115th LeetCode Weekly Contest Prison Cells After N Days

    There are 8 prison cells in a row, and each cell is either occupied or vacant. Each day, whether the ...

  9. SQL中的object_id函数

    关于SQL中的object_id函数:应该就是指系统表中存储着数据库的所有对象 每一个对象都有一个唯一的标识符Id进行标识object_id 就是根据对象名称返回改对象的Idobject_name 就 ...

  10. 二分函数 lower_bound()

    这篇博客说是STL源码.... https://www.cnblogs.com/cobbliu/archive/2012/05/21/2512249.html 头文件 algorithm 1.lowe ...