<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. 用C语言构建一个可执行程序的流程

    1.流程图 从用C语言写源代码,然后经过编译器.连接器到最终可执行程序的流程图大致如下图所示. 2.编译流程 首先,我们先用C语言把源代码写好,然后交给C语言编译器.C语言编译器内部分为前端和后端. ...

  2. 洛谷P2774 方格取数问题（最小割）

    传送门 考虑一下,答案就是全局和减去舍弃和 不难发现,如果我们按行数+列数的奇偶性分为两类,那么每一类中的数必然互不相邻 那么我们把原图的点分为黑点和白点两类,原地向白点连边,黑点向汇点连边,容量为点 ...

  3. spark-2.2.1在centos7安装

    前言 在安装Spark之前,我们需要安装Scala语言的支持.在此我选择的是scala-2.11.12版本.jdk8也要保证已经安装好并且配置好环境变量 scala-2.11.12下载 为了方便,我先 ...

  4. [JSOI2007]麻将 模拟 BZOJ1028

    题目描述 麻将是中国传统的娱乐工具之一.麻将牌的牌可以分为字牌(共有东.南.西.北.中.发.白七种)和序数牌(分为条子.饼子.万子三种花色,每种花色各有一到九的九种牌),每种牌各四张. 在麻将中,通常 ...

  5. Hibernate学习笔记（四）—— 表与表的关系

    一.一对多|多对一 1.1 关系表达 1.1.1 表中的表达 建表原则:在多的一方创建外键指向一的一方的主键. 1.1.2 实体中的表达 [客户实体] public class Customer { ...

  6. Mui 选项卡 tab 高度 没有自适应....

    因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是  用一个值 保存 当前 的 高度... 当 点击其他 t ...

  7. BZOJ 5168 && Luogu P3740 [HAOI2014]贴海报 线段树~~

    据说某谷数据十分水...但幸好BZOJ上也过了...话说我记得讲课时讲的是奇奇怪怪的离散化..但现在突然觉得什么都可以线段树瞎搞了...QAQ 直接就是这个区间有没有被覆盖,被覆盖直接return: ...

  8. C. Magic Ship （思维+二分）

    https://codeforces.com/contest/1117/problem/C 你是一个船长.最初你在点 (x1,y1) (显然,大海上的所有点都可以用平面直角坐标描述),你想去点 (x2 ...

  9. O（1）乘法与快速乘O（log）

    //O(1)快速乘 inline LL quick_mul(LL x,LL y,LL MOD){ x=x%MOD,y=y%MOD; return ((x*y-(LL)(((long double)x* ...

  10. SQL语句练习45题（从第11题开始）

    CREATE TABLE student (sno VARCHAR(3) NOT NULL, sname VARCHAR(4) NOT NULL, ssex VARCHAR(2) NOT NULL, ...