DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS實現滑動展開與折疊效果
JS實現滑動展開與折疊效果
編輯:關於JavaScript     

以下是引用片段:
<script type="text/javascript">
//Url: http://bbs.51js.com/thread-61646-1-1.html
//Author: 風雲突變
//Modify: 楓巖
var act;
function over(s,nMax){
  var obj=document.getElementById(s);
  var h = parseInt(obj.offsetHeight);
  if (h < nMax){
    obj.style.height = (h + 2)+"px";
    clearTimeout(act);
    act = setTimeout("over('"+s+"',"+nMax+")", 10);
  }
}
function out(s,nMin){
  var obj=document.getElementById(s);
  var h = parseInt(obj.offsetHeight);
  if (h > nMin){
    obj.style.height = (h - 2)+"px";
    clearTimeout(act);
    act = setTimeout("out('"+s+"',"+nMin+")", 10);
  }
}
</script>
<div id="mytd" style="background:#eee;">代碼實例:層的滑動展開/折疊</div>


無憂網友 fangxiao9159 再次優化後:
以下是引用片段:
<script type="text/javascript">
var intervalId = null;
function move(id,state){
  var obj = document.getElementById(id);
  if(intervalId != null) 
    window.clearInterval(intervalId);
  function change(){
   var h = parseInt(obj.offsetHeight);
   obj.style.height = (state == "down") ? (h + 2) : (h - 2);
  }
  intervalId = window.setInterval(change,10);
}
</script>
<table border="1" cellpadding="0" cellspacing="0" id="mytd" >
<tr><td>無憂腳本 - 風雲突變</td></tr></table>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved