软件学堂

网游分类软件分类

JS代码实现DIV层折叠效果

2012-10-24 来源:网络

【实例名称】

JS代码实现DIV层折叠效果

【实例描述】

折叠的div是网页显示内容的重要手段,因为使用折叠效果可以节省页面的空间,同时也提高了页面的美观性。本例学习如何制作一个简单的div折叠效果。

【实例代码】

<script type="text/javascript"> var mh = 30; //最小高度 var step = 1; //每次变化的px量 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>

 

【运行效果】

运行效果

                                                                  div 折叠效果

运行效果

                                                                 div 展开效果

【难点剖析】

本例的重点是对象的创建,如“toggler”就是自己创建的一个对象,其包含obj、maxHeight等属性.可以在脚本方法中调用这些属性,此实现类似于面向对象的设计方法。

【源码下载】

下载本实例源码

 

上一篇:JS代码实现DIV自动滚动效果
下一篇:圆角DIV层代码怎么写

相关文章