js实现div层缓慢收缩与展开的方法
引脚本之家
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>层收缩</title>
<script type="text/javascript">
var mh = 30;//高度
var step = 1;//每次变化的量
var ms = 10;//循环时间
function toggle(o){
if (!o.tid)o.tid = "_" + Math.random() * 100;
if (!window.toggler)window.toggler = {};
if (!window.toggler[o.tid]){
window.toggler[o.tid]={
obj:o,
maxHeight:o.offsetHeight,
minHeight:mh,
timer:null,
action:1
};
}
o.style.height = o.offsetHeight + "px";
if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
window.toggler[o.tid].action *= -1;
window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );
}
function anim(id){
var t = window.toggler[id];
var o = window.toggler[id].obj;
if (t.action < 0){
if (o.offsetHeight <= t.minHeight){
clearTimeout(t.timer);
return;
}
}
else{
if (o.offsetHeight >= t.maxHeight){
clearTimeout(t.timer);
return;
}
}
o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
}
</script>
<style type="text/css">
div.xx{
border:solid 1px;overflow:hidden;
}
div.xx h5{
border:solid 1px;border-width:0 0 1px;
padding:0;margin:0;height:28px;
line-height:30px;cursor:pointer;
background:#eee;
}
</style>
</head>
<body>
<div class="xx"><h5 onclick="toggle(this.parentNode)">点击此处层伸缩</h5>
<p>Tomat6.0的配置视频教程，AVI电影格式，相当清淅了，比起图文版的教程更贴切，
不会配置Tomcat的网友，你可不要错过哦，由于视频抓图挺麻烦的，
试了多次还是抓了一个不太清淅的，大家将就吧。</p>
</div>
</body>
</html>
js实现div层缓慢收缩与展开的方法的更多相关文章
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js弹出div层,弹出层页面底部出现UL出现一条线问题
整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...
- JS实现拖动div层移动
JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screen ...
- 【转】selenium技巧 - 通过js来控制滚动条，通过xpath定位最上层的div层
http://blog.csdn.net/iceryan/article/details/8162703 业务流程: 1.打开此网页 http://nanjing.xiaomishu.com/sh ...
- js弹出div层内容(按回退键关闭div层及遮罩)
<!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- JavaScript学习之DIV层与图像
DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距 ...
- jquery实现DIV层拖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS拖动DIV布局
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
随机推荐
- java插入排序
/** * 插入排序 * @param a * @date 2016-10-8 * @author shaobn */ public static void insertSort(int[] a){ ...
- Visual Studio配色方案
Eclipse开源工具和VS在诸多方面真的是差距非常大,无奈Java编程,使用VS非常麻烦.所以只能选择Eclipse 但是Eclipse的系统配色,又实在是不舒服,于是抽时间,从VS上抠了一份默认的 ...
- 夺命雷公狗-----React---28--小案例之react经典案例todos（全选和反选）完
这个功能实现的步骤如下所示: 最终实现全选和反选,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- python之三层菜单递归
首先非常感谢11期的学长薜保库提供了一种非常实用函数递归方法,让实现三层菜单如此简单,不过对所遍历的嵌套字典或列表格式有所要求.有特定的环境下非常实用. 主要针对中国的各省市区进行展示,采用了百度的j ...
- False 等效值
False 等效值 下面这些值将被计算出 false (also known as Falsy values): false undefined null 0 NaN 空字符串 ("&quo ...
- MySQL使用规范
一. 表设计类 强制类规范 1. 创建表的存储引擎必须是InnoDB. 2. 每个表必须显式的指定一个主键. 3. 不允许使用联合主键. 4. 不允许使用外键. 5. 不允许存在和主键重复的索引 ...
- eclipse下项目死活不编译
工作中我们可能会遇到这种问题,项目在Eclipse下就是不编译,无论项目clean,重新build项目,重启eclipse,重启电脑都不好使.... 这时候我们可以把项目的jdk删掉,重新add一下, ...
- HTML5：web socket 和 web worker
a:hover { cursor: pointer } 做练习遇到了一个选择题,是关于web worker的,问web worker会不会影响页面性能?补习功课之后,答案是不会影响. 查阅了相关资料学 ...
- XCode与Git的完美融合，不再依赖其它Git客户端
Git源代码管理工具的出现,使得我们开发人员对于源码的管理更加方便快捷.至于Git的优点以及与其他源代码管理工具有何区别,不是本文的重点,如果想深入了解可以搜索一下这方面的文章.下面直接进入主题,如何 ...
- Linux 视频设备驱动V4L2最常用的控制命令
http://blog.csdn.net/shaolyh/article/details/6583226 Linux 视频设备驱动V4L2最常用的控制命令使用说明(1.02) 命令 功能 VIDIOC ...