在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享javascript:JS实现的滑动展开与折叠效果,希望可以对大家能有小小的帮助。
【 tulaoshi.com - Web开发 】
需要写个滑动展开折叠的效果,搜索到无忧脚本的一篇贴子,稍加修改了下使其在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');" 
trtd无忧脚本 - 风云突变/td/tr/table 
来源:http://www.tulaoshi.com/n/20160219/1628061.html
看过《javascript:JS实现的滑动展开与折叠效果》的人还看了以下文章 更多>>