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 相关文章推荐
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
JS跨域问题详解
Nov 25 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Angular工具方法学习
Dec 26 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 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
PHP的password_hash()使用实例
2014/03/17 PHP
php中adodbzip类实例
2014/12/08 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
php自动载入类用法实例分析
2016/06/24 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
Javascript MD4
2006/12/20 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python中偏函数用法示例
2018/06/07 Python
python实现textrank关键词提取
2018/06/22 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
python爬虫之自制英汉字典
2019/06/24 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
员工拓展培训方案
2014/02/15 职场文书
班级旅游计划书
2014/05/03 职场文书
妇联主席先进事迹
2014/05/18 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
售后服务承诺函格式
2015/01/21 职场文书
于丹讲座视频观后感
2015/06/15 职场文书