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 相关文章推荐
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
js实现简单的随机点名器
Sep 17 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
10个实用的PHP代码片段
2011/09/02 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Python class的继承方法代码实例
2020/02/14 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
python如何导入依赖包
2020/07/13 Python
python音频处理的示例详解
2020/12/23 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Overload和Override的区别
2012/09/02 面试题
工作自我评价分享
2013/12/01 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
煤矿安全承诺书
2014/05/22 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
聘任通知书
2015/09/21 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript