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

2016-02-19 15:41 9 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享JS实现滑动展开与折叠效果教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发 】

以下是引用片段:
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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)


无忧网友 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/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1610206.html

延伸阅读
标签: Web开发
缓动,学名为Tween,缓冲移动的简称。要想页面内容切换起来舒服,就使用淡入淡出特效,要想让页面元素动起来自然,就要使用缓动效果。这两个混合起来,可以衍生多种特效的。感谢Flash开发人员为我们做了那么多先行研究,我们直接把它们拆出来装在各种菜单与相册中。我们先从最简单的东西做起,加速与减速。 既然是缓动,它就一定涉及以下概...
标签: Web开发
SCRIPT language=JAVASCRIPTfunction fade_in(){if (test.filters.alpha.opacity 100){test.filters.alpha.opacity += 10;clearTimeout(timer);var timer = setTimeout("fade_in()",150);timer;}}/SCRIPT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"   <head    <meta name="ve...
标签: Web开发
脚注(Footnote)是向用户提供更多信息的一个最佳途径,也是主体信息的一个有效补充,常见于各种印刷书籍中。不过,既然脚注有这些好处,我们当然要在网页中也加以利用,本文向您介绍了用Javascript和CSS实现脚注效果的方法。 Javascript: script type="text/javascript" // 说明:用 Javascript 和 CSS 实现脚注(Footnote)效果 /...
标签: Web开发
有个静态页面 span id=ababcde/spanspan id=ababcde/spanspan id=ababcde/spanspan id=ababcde/span 能否通过js实现,IE浏览时的代码被替换为 img src="img/1.gif"/img src="img/1.gif"/img src="img/1.gif"/img src="img/1.gif"/ 无标题文档 移到我这儿来 [Ctrl+A 全选 注:...

经验教程

160

收藏

50
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部