网站首页/技术开发列表/内容

JS代码完成DIV层折叠效果

技术开发2023-06-21阅读
编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

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等属性.可以在脚本方法中调用这些属性,此实现类似于面向对象的设计方法。

【源码下载】

下载本实例源码

 


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

……

相关阅读