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 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
在Vue中使用mockjs代码实例
Nov 25 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
php数组合并的二种方法
2014/03/21 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
Javascript的this详解
2019/03/23 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
python 正则式使用心得
2009/05/07 Python
python批量修改文件名的实现代码
2014/09/01 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python从零开始创建区块链
2018/03/06 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
美的官方商城:Midea
2016/09/14 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
java泛型通配符详解
2021/07/25 Java/Android
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫