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、Windows CE 6.0正式发布 源代码100%开放
https://www.onexin.net/windows-ce-60%e6%ad%a3%e5%bc%8f%e5%8f%91%e5%b8%83-%e6%ba%90%e4%bb%a3%e7%a0%81100%ef%bc%85%e5%bc%80%e6%94%be/

2、Java开源缓存框架介绍
https://www.onexin.net/java-open-source-caching-frameworks-introduced/

3、只需花一块钱买一个月阿里云主机
https://www.onexin.net/just-spend-a-money-to-buy-a-month-ali-cloud-host/

4、Javascript Dump
https://www.onexin.net/javascript-dump/

5、谷歌向OEM厂商提供Android最大漏洞补丁
https://www.onexin.net/google-android-to-oem-manufacturers-to-provide-maximum-patches/

Leave a Reply