JS技术

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

字号+ 作者: 来源:    2014-11-17 20:00 我要评论( )

JS实现滑动展开与折叠效果,阅读JS实现滑动展开与折叠效果,以下是引用片段:script type=

以下是引用片段:
<script type="text/javascript">
//Url:
//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.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 学习JavaScript之this,call,apply

    学习JavaScript之this,call,apply

    2016-01-28 20:45

  • 轻松学习JavaScript十五:JavaScript之BOM简介 - 连宏伟 - 博客频道 - CSDN.NET 连宏

    轻松学习JavaScript十五:JavaScript之BOM简介 - 连宏伟 - 博客频道

    2015-12-13 11:34

  • js事件与处理_Javascript教程

    js事件与处理_Javascript教程

    2015-10-10 15:06

  • js对象属性及方法_Javascript教程

    js对象属性及方法_Javascript教程

    2015-10-10 15:04

网友点评