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 相关文章推荐
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
js实现图片放大展示效果
Aug 30 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
vue实现简单瀑布流布局
May 28 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
关于Vue中的options选项
Mar 22 Vue.js
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 strtr() 函数使用说明
2008/11/21 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
PHP生成器简单实例
2015/05/13 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
js仿360开机效果
2019/12/26 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
对python中return与yield的区别详解
2020/03/12 Python
python实现简单学生信息管理系统
2020/04/09 Python
python 两种方法删除空文件夹
2020/09/29 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
生物技术专业毕业生求职信范文
2013/12/14 职场文书
党课学习思想汇报
2014/01/02 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
消防安全培训工作总结
2015/10/23 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL