网页特效:滑动展开与折叠效果

时间:2008-10-06 10:28:24  来源:第二电脑网上收集  作者:

  第二电脑网导读:r: 风云突变 //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)+"p...
  正文: 需要写个滑动展开折叠的效果,搜索到无忧脚本的一篇贴子,稍加修改了下使其在FF也可应用,代码如下:
<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" onmouSEOver="over('mytd',200);" onmouseout="out('mytd',30);" 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" onmouseover="move('mytd','down');" onmouseout="move('mytd','out');">
<tr><td>无忧脚本 - 风云突变</td></tr></table>

"网页特效:滑动展开与折叠效果"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/HTML/2008-10-06/1614.html


关键字:

关于《网页特效:滑动展开与折叠效果》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td