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

2016-02-19 22:16 56 1 收藏

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

【 tulaoshi.com - Web开发 】

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

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

来源:https://www.tulaoshi.com/n/20160219/1628061.html

延伸阅读
标签: Web开发
Javascript:  程序代码 /* 函数名称: Scroll Scroll(obj, h, s) 参数说明: obj,[object] id值或对象. 必需 h,[height] 展开后的高度. 可选(默认为200px) s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}. 函数返回值: true 展开(对象的高度等于展开后的高度) false 关闭(对象的高度等于原始...
标签: Web开发
曾经看到http://www.panic.com/coda/ 上的滑动块,非常喜欢。可惜自己多JS了解不深,没法模拟出来。 早上发现Google code上的一个JsFrame - Glider.js。很容易的实现http://www.panic.com/coda/ 上的滑动块效果。 Google code上的项目地址:http://code.google.com/p/missingmethod-projects/ 600)?'600px':'auto...
标签: Web开发
之前我们用Flash做按钮和画廊等,现在jQuery、Mootools、Scriptallicious、YUI和Prototype等JavaScript框架可以用轻量的代码来获得和Flash一样的效果,从而可以替换掉Flash,这也同样给网站开发人员和设计师很大的创意空间。 但是如何在不让用户分散注意力并增加网站的价值的情况下高效的使用这些框架? 看一下下面的这30个网站例子,它们...
标签: Web开发
style type="text/css"    #oContainer {          width: 600px;          height: 500px;          border: 1px solid menu;   ...
标签: Web开发
无标题文档 #div1{ height:200px;width:200px; filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=1,transition=12); background:#CCCCCC; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

经验教程

675

收藏

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