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>

随机文章:

1、pngfix兼容IE6^9
https://www.onexin.net/pngfix-compatible-ie6-9/

2、列出指定目录下所有文件及文件夹的php函数
https://www.onexin.net/php-function-list-all-files-and-folders-under-the-specified-directory/

3、轻松解决:mysql数据库连接过多的错误
https://www.onexin.net/easy-solution-mysql-database-connection-errors-too/

4、URLCode加密和解密转换 | rawurlencode,rawurldecode,urlencode,urldecode
https://www.onexin.net/urlcode-encryption-and-decryption-conversion-rawurlencode-rawurldecode-urlencode-urldecode/

5、android的odex是什么文件
https://www.onexin.net/what-is-the-androids-odex-file/

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

Leave a Reply

Your email address will not be published. Required fields are marked *