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、jquery 升级版本兼容问题整理
https://www.onexin.net/jquery-upgrade-version-compatible-problem-finishing/

2、Google Ad Planner通过广告商方案提高您网站的曝光率
https://www.onexin.net/google-ad-planner-through-advertising-programs-to-increase-the-visibility-of-your-site/

3、HTML中小meta的大作用
https://www.onexin.net/html-small-and-medium-sized-meta-role/

4、通过应用程序缓存实现HTML5的离线浏览
https://www.onexin.net/achieved-through-the-application-of-html5-offline-cache/

5、对菜鸟有点帮助的代码。大大也这样用。
https://www.onexin.net/code-a-little-help-on-the-rookie-significantly-so/

Leave a Reply