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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
javascript简单链式调用案例分析
May 10 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
纯js实现画一棵树的示例
Sep 05 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
vue将单页面改造成多页面应用的方法
Nov 25 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
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
浅析Python中的多进程与多线程的使用
2015/04/07 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
简短大学毕业感言
2014/01/18 职场文书
档案室主任岗位职责
2014/02/12 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
与美同行演讲稿
2014/09/13 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
多人股份制合作协议书
2016/03/19 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
基于Python实现流星雨效果的绘制
2022/03/18 Python
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers