Javascript实现div的toggle效果实例分析


Posted in Javascript onJune 09, 2015

本文实例讲述了Javascript实现div的toggle效果。分享给大家供大家参考。具体分析如下:

<script type="text/javascript" language="javascript">
  function $(obj)
  {
  return document.getElementById(obj);
  }
  function ToggleDiv()
  {
  this.ToggleId='silder'; //被伸缩的对象ID
  this.ParentId='container'; //被伸缩的对象的父ID
  this.minHeight=1; //最小高度
  this.maxHeight=200; //最大高度
  this.speed=1; //伸缩速度
  this.offset=0.15; //偏移量
  this.load=function()
  {
   if($(this.ToggleId).style.display=='none') //如果是隐藏的就打开
   {
    StartToggle('open',this.ToggleId,this.ParentId,this.minHeight,this.maxHeight,this.speed,this.offset);
   }
   else //如果是打开的就隐藏
   {
     StartToggle('close',this.ToggleId,this.ParentId,this.minHeight,this.maxHeight,this.speed,this.offset);
   }
  }
  }
  function StartToggle(method,toggleid,parentid,minheight,maxheight,speed,offset)
  {
  if(typeof(method)!='string' || method.toLowerCase()=='')
  {
   method='open';
  }
  if(method.toLowerCase()=='open')
  {
   var addspeed=speed+offset;
   var openfun=function()
   {
    var originheight=$(toggleid).offsetHeight==0?1:$(toggleid).offsetHeight;
    var newheight=originheight+addspeed;
    addspeed=addspeed+offset;
    if(parseInt(newheight)<parseInt(maxheight))
    {    
     $(toggleid).style.height=newheight+'px';
     $(toggleid).style.display='block';
    }
    else if(parseInt(newheight)>=parseInt(maxheight))
    {
     $(toggleid).style.height=maxheight+'px';
     $(toggleid).style.display='block';
     $(parentid).innerHTML='收缩';
     window.clearInterval(addtimer);
    }
   }
   var addtimer=window.setInterval(openfun,100);
  }
  else if(method.toLowerCase()=='close')
  {
   var addspeed=speed+offset;
   var reducefunction=function()
   {
    var originheight=$(toggleid).offsetHeight;
    var newheight=originheight-addspeed;
    addspeed=addspeed+offset;
    if(parseInt(newheight)>parseInt(minheight))
    {
     $(toggleid).style.height=newheight+'px';
     $(toggleid).style.display='block';
    }
    else
    {
     $(toggleid).style.display='none';
     $(toggleid).style.height='1px';
     $(parentid).innerHTML='展开';
     window.clearInterval(reducetimer);
    }
   }
   var reducetimer=window.setInterval(reducefunction,100);
  }
  }
  function DoToggle(obj1,obj2)
  {
  var tog=new ToggleDiv();
  tog.ToggleId=obj1;
  tog.ParentId=obj2;
  tog.minHeight=5;
  tog.maxHeight=110;
  tog.speed=10;
  tog.offset=3;
  tog.load();
  }
</script>

用法示例如下:

<div style="border:1px dashed blue;width:200px;">
  <h2 id="container" onclick="javascript:DoToggle('silder',this.id);" onmouseover="this.style.cursor='pointer';">展开</h2>
  <div id="silder" style="display:none">
  伸缩效果<br />
  伸缩效果<br />
  伸缩效果<br />
  伸缩效果<br />伸缩效果<br />
  伸缩效果<br />
  </div>
</div>

代码中有些东东是多余的或者是重复的。本想精简单一下,但是一想,思路有了就行了。

以下是本次练习中的一些经验小结:

1、在style.display='none'与style.visibility='hidden'时读取对象的offsetHeight值将会有所不同。
style.display='none'读出来的,将是 0 ,而style.visibility='hidden'时读取的是对象加载时的offsetHeight,比如 108等。

2、style.height的值并不是整型或number型的,别忘了它是有单位的哦:如 "108px"而不是"108",而offsetHeight的值是 108.

3、setTimeout和setInterval

它们都有两种使用方法,以setTimeout为例:

方法一:setTimeout(function,interval,args) 参数一为函数名或匿名函数,参数2为时间间隔,参数3到N是所调用函数的参数,如下例:

setTimeout(function(){alert('1');},1000) setTimeout(GetStr,1000,'McJeremy')

方法二:setTimeout(object,function,interval) 参数一为调用的对象,参数2为对象中的方法,参数3为时间间隔。

有个有趣的东东:

function a()
{
 setTimeout(function(){alert('1');},0);
 alert('2');
}

猜输出结果是什么?

答案: 21 ,而不是12哦。这是因为,JS函数执行也像其它编程语言一样有堆栈的。alert('1')因为有setTimeout,所以最后执行。。。不知道我这样理解对不对。

完成收功!

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

Javascript 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
js不常见操作运算符总结
Nov 20 Javascript
js获取字符串字节数方法小结
Jun 09 #Javascript
Javascript对象Clone实例分析
Jun 09 #Javascript
JS动态创建DOM元素的方法
Jun 09 #Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 #Javascript
JavaScript获取两个数组交集的方法
Jun 09 #Javascript
JavaScript实现函数返回多个值的方法
Jun 09 #Javascript
JavaScript中的getDay()方法使用详解
Jun 09 #Javascript
You might like
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
Python单例模式实例分析
2015/01/14 Python
Python中的推导式使用详解
2015/06/03 Python
Python每天必学之bytes字节
2016/01/28 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
python+OpenCV实现图像拼接
2020/03/05 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
物控部经理职务说明书
2014/02/25 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
如何写股份合作协议书
2014/09/11 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
MongoDB 常用的crud操作语句
2021/06/20 MongoDB