<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. UI控件的位置

    1.该位置指的是本控件的中心点位于点 (100, 100)上(不包含尺寸),可以用于中心对齐在使用frame设置位置的情况下 self.view.center = CGPointMake(100, 1 ...

  2. Kubernetes 集群部署(3) -- Flannel 集群

    1. 下载包 wget https://github.com/coreos/flannel/releases/download/v0.11.0/flannel-v0.11.0-linux-amd64. ...

  3. .NET clickonce修改发布名称等

    见图

  4. [CQOI2006]凸多边形(半平面交)

    很明显是一道半平面交的题. 先说一下半平面交的步骤: 1.用点向法(点+向量)表示直线 2.极角排序,若极角相同,按相对位置排序. 3.去重,极角相同的保留更优的 4.枚举边维护双端队列 5.求答案 ...

  5. idea中文输入问题

    desc: idea2017.3.4输入中文,光标不跟随. 解决方案:

  6. 在 MVC 中使用 ninject Lazy Load的一个想法

    这这里先声明一下,引用了一个 (http://www.edcourtenay.co.uk/musings-of-an-idiot/2012/11/23/lazy-binding-with-ninjec ...

  7. angularjs中向html页面添加内容节点元素代码段的两种方法

    第一种方式:原生JS向html页面添加内容节点元素代码段: <!DOCTYPE html> <html> <head> <meta charset=" ...

  8. JavaWeb学习笔记(九)—— JSTL标签库

    一.JSTL概述 1.1 什么是JSTL  JSTL是apache对EL表达式的扩展(也就是说JSTL依赖EL),JSTL是标签语言!JSTL标签使用以来非常方便,它与JSP动作标签一样,只不过它不是 ...

  9. BAM/SAM格式

    本质上就是二进制压缩的SAM文件,大部分生物信息学流程都需要这个格式,为了节省存储空间以及方便索引. # BiocInstaller::biocLite('Rsamtools') library(Rs ...

  10. Dojo2 前端框架基本操作

    安裝CLI,需要先有npm: npm install -g @dojo/cli npm install -g @dojo/cli-create-app 创建项目目录,-n 后面是名字,创建完成后会自动 ...