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 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 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
apache php模块整合操作指南
2012/11/16 PHP
php验证手机号码
2015/11/11 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Python列表推导式实现代码实例
2020/09/09 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
网络事业创业计划书范文
2014/01/09 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
工程部主管岗位职责
2015/02/12 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书