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