JS实现的滑动展开与折叠效果

需要写个滑动展开折叠的效果,搜索到无忧脚本的一篇贴子,稍加修改了下使其在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>

转载请注明出处:https://www.onexin.net/js-to-achieve-the-sliding-expand-and-collapse-results/

随机文章:

1、CSS在线编辑助手 – CSS Style Editor
https://www.onexin.net/css-online-editor-assistant-css-style-editor/

2、PHP Redis数据库操作大全
https://www.onexin.net/php-redis/

3、XP下本地文件内容全文搜索
https://www.onexin.net/xp-local-file-content-search-for-the-next/

4、Discuz!Q 如何更改域名domain?
https://www.onexin.net/discuzq-domain/

5、[个人潜能2B]成功的科学条件神经联想之调整(NAC)
https://www.onexin.net/personal-potentials-2b-conditions-for-the-success-of-the-scientific-association-of-neural-adjustment-nac/

Leave a Reply