<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. 【BZOJ4555】[TJOI&HEOI2016]求和 斯特林数+NTT

    Description 在2016年,佳媛姐姐刚刚学习了第二类斯特林数,非常开心. 现在他想计算这样一个函数的值: S(i, j)表示第二类斯特林数,递推公式为: S(i, j) = j ∗ S(i ...

  2. 16、OpenCV Python 腐蚀和彭胀

    __author__ = "WSX" import cv2 as cv import numpy as np def erode_demo(image): print(image. ...

  3. Docker - CentOS 安装 Docker 和 Docker-Compose

    目录 介绍 Docker Docker-Conpose 安装 Docker CE 系统要求 使用 YUM 安装 配置加速器 安装 Docker-Compose 介绍 Docker Docker 是一个 ...

  4. ansible基本模块-server

    ansible   XXX   -m   service   -a  "name=XXX   state=started   enabled=yes"

  5. java 连接 Redis

    使用 jedis-2.9.0.jar 包 连接 Docker 中的 Redis 容器. package redisTest; /** * @Author:YangLianjun * @Descript ...

  6. Android LayerDrawable资源应用

    1.介绍 (1)常识 (2)特点 2.实例演示 <1>新建drawable文件 app--->src---->main---->res---->drawable , ...

  7. artDialog不能拖拽的问题

    需要引用下面这个文件: https://github.com/aui/artDialog/edit/master/dist/dialog-plus.js

  8. springboot(五)-使用Redis

    Redis服务器 springboot要使用redis,首先当然要确保redis服务器能够正常跑起来. pom.xml 这里添加redis的依赖,当然也是springboot集成好的. <!-- ...

  9. layer.open中content里面的元素追加click事件，触发不了

    [注意] 事件要追加在触发弹出事件的点击事件里面 $('#feedback').click(function(){ layer.open({ content:'<div><div c ...

  10. 在Eclipse中添加Servlet-api.jar的方法

    方法一: 正确的加载servlet-api.jar的方法如下: 1:右击项目工程名称 2:Properties 3:  Jvav Build Path 4:  Libraries 5:  Add Ex ...