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

库里萌萌

库里萌萌

2016-02-19 22:16

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享javascript:JS实现的滑动展开与折叠效果,希望可以对大家能有小小的帮助。

  需要写个滑动展开折叠的效果,搜索到无忧脚本的一篇贴子,稍加修改了下使其在FF也可应用,代码如下:

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

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

(本文来源于图老师网站,更多请访问https://m.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

展开更多 50%)
分享

猜你喜欢

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

Web开发
javascript:JS实现的滑动展开与折叠效果

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

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

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

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

电脑网络
JS实现的滑动展开与折叠效果

JS教程:Javascript实现缓动效果

Web开发
JS教程:Javascript实现缓动效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript/JS实现图象淡出效果

Web开发
JavaScript/JS实现图象淡出效果

javascript实现的颜色块滑动的动态效果

Web开发
javascript实现的颜色块滑动的动态效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JS技巧之showModelessDialog()使用详解

JS技巧之showModelessDialog()使用详解

javascript实现划词标记划词搜索功能

javascript实现划词标记划词搜索功能
下拉加载更多内容 ↓