js实现div层缓慢收缩与展开的方法


Posted in Javascript onMay 11, 2015

本文实例讲述了js实现div层缓慢收缩与展开的方法。分享给大家供大家参考。具体分析如下:

这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错。不受内容约束,收缩与展开的速度是可以控制的,高度、循环时间也可以改。

<!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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
关于Javascript 的 prototype问题。
Jan 03 Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 #Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 #Javascript
JavaScript实现表格点击排序的方法
May 11 #Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 #Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 #Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 #Javascript
jQuery子窗体取得父窗体元素的方法
May 11 #Javascript
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue观察模式浅析
2018/09/25 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python算法之图的遍历
2017/11/16 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
如何处理简单的PHP错误
2015/10/14 面试题
小学生新学期寄语
2014/01/19 职场文书
自我鉴定注意事项
2014/01/19 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
赤壁观后感(2)
2015/06/15 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
HTML基本元素标签介绍
2022/02/28 HTML / CSS