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 ...
随机推荐
- Bare Medal on BCM2835 and BCM2836
A few days ago, I have tried to write bare medal program but failed. Now I find that the main mistak ...
- 实测:Windows 8.1 (Windows Blue) 第三方桌面应用无法支持Retina屏，效果与Windows8.0似无差别。
首先我是在VMWARE下装的Windows Blue,是否改用BootCamp直接装就没问题我不知道,理论上应该无差别. 谣言里那个Windows Blue里的缩放功能可以完美支持Retina,但实际 ...
- 解决ADB server didn't ACK问题，连上手机问题
出现如下情况 ADB server didn't ACK* failed to start daemon * 解决办法: 方法一: (1)查看任务管理器,关闭所有adb.exe,或者运行->cm ...
- Web.config配置详解
一.认识Web.config文件 Web.config 文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NET Web ...
- Java设计模式（一）——代理模式
有高手云:了解设计模式才算是入门级的程序员. 所以为了入门我打算把我学习到的设计模式逐条总结下来.和别人的文章不同,我几乎只提供了测试源码与细节分类.原因是,我相信对于设计来说,你永远无法给出终极答案 ...
- discuz!
1. discuz! 安装包下载 http://www.discuz.net/thread-3570835-1-1.html
- java 7中文件的复制移动
在java 7 中文件移动复制简单方法 文件移动 Path source=Paths.get("D:\\sa\\123.txt"); Path target=Paths.get(& ...
- [linux系统]查看内核版本和系统版本方法
查看内核版本信息的两个命令: uname -a cat /proc/version 查看系统版本的命令: lsb_release -a more /etc/issue cat /etc/redhat- ...
- Audio播放音效
AudioToolbox.framework是一套基于C语言的框架,使用它来播放音效其本质是将短音频注册到系统声音服务(System Sound Service).System Sound Servi ...
- sublime SublimeTmpl 添加vue模板
sublime2安装时候报错在control中加下面的代码 重新启动,可以进行安装 import urllib2,os; pf='Package Control.sublime-package'; i ...