【實(shí)例名稱(chēng)】

JS代碼實(shí)現(xiàn)DIV層折疊效果

【實(shí)例描述】

折疊的div是網(wǎng)頁(yè)顯示內(nèi)容的重要手段，因?yàn)槭褂谜郫B效果可以節(jié)省頁(yè)面的空間，同時(shí)也提高了頁(yè)面的美觀性。本例學(xué)習(xí)如何制作一個(gè)簡(jiǎn)單的div折疊效果。

【實(shí)例代碼】

<script type="text/javascript">
var mh = 30; //最小高度
var step = 1; //每次變化的px量
var ms = 10; //每隔多久循環(huán)一次
//折疊速度的設(shè)置方法
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 );//注意計(jì)時(shí)器的用法
}
//通過(guò)對(duì)象的最小高度和最大高度，判斷折疊是否停止
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>
 

【運(yùn)行效果】

                                                                  div 折疊效果

                                                                 div 展開(kāi)效果

【難點(diǎn)剖析】

本例的重點(diǎn)是對(duì)象的創(chuàng)建，如“toggler”就是自己創(chuàng)建的一個(gè)對(duì)象，其包含obj、maxHeight等屬性．可以在腳本方法中調(diào)用這些屬性，此實(shí)現(xiàn)類(lèi)似于面向?qū)ο蟮脑O(shè)計(jì)方法。

【源碼下載】

下載本實(shí)例源碼