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

    第一次开通博客, 今天开始了计算机方面的学习,我将通过博客来总结自己的学习内容以及分享学习经验,同时我将分享在技术方面的所见所闻以及所思所想,希望能和大家一起探讨,共同进步~

  2. 1. C/C++项目一

    需求: 使用C语言封装string 字符串,实现字符串的增.删.改.查等API函数. 要求: 不能使用 string 库函数,所有库函数必须自己手动实现. [项目实现] myString.h 代码如下 ...

  3. 老男孩Day16作业：登录、注册、后台管理页面（动态）

    一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...

  4. Jenkins持续集成企业实战系列之Jenkins手动构建-----04

    注:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.    最初接触Jenkins也是由于公司需求,根据公司需求Java代码项目升级的.(公司是 ...

  5. JSP使用Struts2标签库报错

    JSP中使用<%@ taglib prefix="s" uri="/struts-tags" %>报错:Cannot find the tag li ...

  6. winform工具1-图片去除水印

    效果图: 思路: 1.获取图片 2.处理水印 3.保存处理的图片 代码: 获取图片: private void button1_Click(object sender, EventArgs e) { ...

  7. 蠕虫Worm virus

    美国CORNELL大学研究生莫里斯编写的蠕虫病毒 蠕虫病毒是一种常见的计算机病毒.它是利用网络进行复制和传播,传染途径是通过网络和电子邮件.最初的蠕虫病毒定义是因为在DOS环境下,病毒发作时会在屏幕上 ...

  8. C++_标准模板库STL概念介绍4-算法

    STL包含很多处理容器的非成员函数: sort() copy() find() random_shuffle() set_union() set_intersection() set_differen ...

  9. Codeforces1114 D. Flood Fill （DP）（整个区间染成同色）

    题意:连续的几个颜色相同的格子称为一个连通块.选一个点为起点,每个操作是把所在连通块变一个颜色,求把整个区间染成同色需要的最少操作数.(注意,每次只能改变所在连通块的颜色,不能任选连通块,除了最开始时 ...

  10. Valgrind 检测程序内存使用

    Valgrind是用于构建动态分析工具的探测框架.它包括一个工具集,每个工具执行某种类型的调试.分析或类似的任务,以帮助完善你的程序.Valgrind的架构是模块化的,所以可以容易地创建新的工具而又不 ...