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的折叠效果如图5-4所示，展开效果如图5-5所示。

               

图5-4  div折叠效果                              图5-5  div展开效果

【难点剖析】

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