设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

查看: 20000|回复: 26

[求助] 如何让一个层慢慢增高展开,有种向下滑动的效果 [复制链接]

Rank: 2

升级  63.33%

注册时间
2004-9-22
威望
45
阅读权限
20
积分
145
帖子
50
精华
0
UID
17384
状态
当前离线
发表于 2006-9-15 09:42:04 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
一键分享 一键分享
点击展开时
让一个层慢慢增高展开有种向下滑动的效果
点关闭时又慢慢合拢...

谢谢

Rank: 4

升级  91%

注册时间
2005-6-21
威望
616
阅读权限
50
积分
955
帖子
638
精华
0
UID
31656
状态
当前离线
发表于 2006-9-15 12:08:11 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ
HTMLObject.style.height=i+"px";
i++

使用道具 举报

Rank: 2

升级  63.33%

注册时间
2004-9-22
威望
45
阅读权限
20
积分
145
帖子
50
精华
0
UID
17384
状态
当前离线
发表于 2006-9-16 11:19:02 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料

?

?

使用道具 举报

Rank: 6Rank: 6

升级  23.25%

注册时间
2005-8-29
威望
867
阅读权限
70
积分
1465
帖子
867
精华
0
UID
36208
状态
当前离线
发表于 2006-9-18 13:12:37 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 Yahoo!
好像要用setTimeOut

使用道具 举报

管理员

振兴无忧

Rank: 9Rank: 9Rank: 9

注册时间
2003-7-13
威望
3340
阅读权限
200
积分
7647
帖子
3120
精华
5
UID
4354
状态
当前离线
发表于 2006-9-18 13:59:21 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 查看个人网站
风云突变曾经写过一个比较经典的例子:
  1. <script language="JavaScript">
  2. var act;
  3. function over(){
  4. var h = parseInt(mytd.height);
  5. if (h < 164){
  6. mytd.height = h + 2;
  7. clearTimeout(act);
  8. act = setTimeout('over()', 10);
  9. }
  10. }
  11. function out(){
  12. var h = parseInt(mytd.height);
  13. if (h > 30){
  14. mytd.height = h - 2;
  15. clearTimeout(act);
  16. act = setTimeout('out()', 10);
  17. }
  18. }
  19. </script>
  20. <table width="316" height="30" border="2" cellpadding="0" cellspacing="0" id="mytd" onMouseOver="over()" onMouseOut="out()">
  21. <tr>
  22. <td>无忧脚本 - 风云突变</td>
  23. </tr>
  24. </table>
复制代码运行代码另存代码
如果您需要提问题之前,请先尝试以下两个链接:
http://bbs.51js.com/search.php
http://bbs.51js.com/viewthread.php?tid=21031
===============================
先无忧之忧而忧,后无忧之乐而乐。

使用道具 举报

Rank: 2

升级  63.33%

注册时间
2004-9-22
威望
45
阅读权限
20
积分
145
帖子
50
精华
0
UID
17384
状态
当前离线
发表于 2006-10-10 12:14:39 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
上面的例子都设置了高度的.如果不设置高度呢

使用道具 举报

Rank: 3Rank: 3

升级  82.67%

注册时间
2004-1-2
威望
239
阅读权限
30
积分
448
帖子
232
精华
0
UID
7687
状态
当前离线
发表于 2006-10-10 13:06:07 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ
如果不设置度。
脚本里
height改成offsetHeight

使用道具 举报

Rank: 3Rank: 3

升级  98.67%

注册时间
2003-12-28
威望
135
阅读权限
30
积分
496
帖子
100
精华
1
UID
7576
状态
当前离线
发表于 2006-11-6 11:30:12 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站
改了下风云的代码,让其在FF下也可以应用:
  1. <script type="text/javascript">
  2. //Url: http://bbs.51js.com/thread-61646-1-1.html
  3. //Author: 风云突变
  4. //Modify: 枫岩
  5. var act;
  6. function over(s,nMax){
  7.   var obj=document.getElementById(s);
  8.   var h = parseInt(obj.offsetHeight);
  9.   if (h < nMax){
  10.     obj.style.height = (h + 2)+"px";
  11.     clearTimeout(act);
  12.     act = setTimeout("over('"+s+"',"+nMax+")", 10);
  13.   }
  14. }
  15. function out(s,nMin){
  16.   var obj=document.getElementById(s);
  17.   var h = parseInt(obj.offsetHeight);
  18.   if (h > nMin){
  19.     obj.style.height = (h - 2)+"px";
  20.     clearTimeout(act);
  21.     act = setTimeout("out('"+s+"',"+nMin+")", 10);
  22.   }
  23. }
  24. </script>
  25. <div id="mytd" onmouseover="over('mytd',200);" onmouseout="out('mytd',30);" style="background:#eee;">代码实例:层的滑动展开/折叠</div>
复制代码运行代码另存代码

使用道具 举报

Rank: 3Rank: 3

升级  12%

注册时间
2005-2-21
威望
73
阅读权限
30
积分
236
帖子
73
精华
0
UID
23822
状态
当前离线
发表于 2006-11-6 11:33:35 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料

把楼上的代码再优化一下.

  1. <script>
  2. var intervalId = null;
  3. function move(id,state){
  4.         var obj = document.getElementById(id);
  5.         if(intervalId != null)
  6.                 window.clearInterval(intervalId);
  7.         function change(){
  8.             var h = parseInt(obj.offsetHeight);
  9.             obj.style.height = (state == "down") ? (h + 2) : (h - 2);
  10.         }
  11.         intervalId = window.setInterval(change,10);
  12. }
  13. </script>
  14. <table border="1" cellpadding="0" cellspacing="0" id="mytd" onmouseover="move('mytd','down');" onmouseout="move('mytd','out');">
  15. <tr><td>无忧脚本 - 风云突变</td></tr></table>
复制代码运行代码另存代码

[ 本帖最后由 fangxiao9159 于 2006-11-6 11:35 编辑 ]

使用道具 举报

Rank: 3Rank: 3

升级  6.33%

注册时间
2006-6-5
威望
128
阅读权限
30
积分
219
帖子
129
精华
0
UID
52649
状态
当前离线
发表于 2006-11-6 11:37:30 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
很多库是做这个的 moo.fx 最专业, jsLINB 的 fx 可是,最近还有个 animator.js

使用道具 举报

Rank: 3Rank: 3

升级  22%

注册时间
2004-8-16
威望
141
阅读权限
30
积分
266
帖子
148
精华
0
UID
15624
状态
当前离线
发表于 2007-2-28 17:09:51 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站
留一个脚印吧,,第二个效果挺好的。

使用道具 举报

Rank: 3Rank: 3

升级  35.33%

注册时间
2007-2-2
威望
147
阅读权限
30
积分
306
帖子
154
精华
0
UID
65204
状态
当前离线
发表于 2007-2-28 17:41:25 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
都挺好,不过第2个更爽些

使用道具 举报

Rank: 3Rank: 3

升级  19.67%

注册时间
2005-1-22
威望
93
阅读权限
30
积分
259
帖子
81
精华
0
UID
22816
状态
当前离线
发表于 2007-2-28 22:52:00 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
我写过一个类,不知道是不是你要的这种。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <STYLE>
  7.         body {
  8.         background-color: #EEEEEE;
  9.         margin: 0px;
  10.         text-align: center;
  11.         }
  12.         #wrap {
  13.         width: 736px;
  14.         background-color: #FFFFFF;
  15.         overflow: hidden;
  16.         margin: 12px;
  17.         padding: 12px;
  18.         }
  19.         #topcontainer {
  20.         height: 80px;
  21.         width: 732px;
  22.         background-color: #99FF66;
  23.         border: 1px solid #79F200;
  24.         }
  25.         #bodycontainer {
  26.         height: 400px;
  27.         width: 100%;
  28.         margin-top: 12px;
  29.         }
  30.         #bottomcontainer {
  31.         height: 60px;
  32.         width: 100%;
  33.         margin-top: 12px;
  34.         }
  35.         #topwrap {
  36.         width: 100%;
  37.         }
  38.         #leftcontainer {
  39.         background-color: #99FF66;
  40.         height: 400px;
  41.         width: 120px;
  42.         float: left;
  43.         border: 1px solid #79F200;
  44. }
  45. input {
  46.         background-color: #99FF66;
  47.         border-top-width: 1px;
  48.         border-right-width: 1px;
  49.         border-bottom-width: 1px;
  50.         border-left-width: 1px;
  51.         border-top-style: solid;
  52.         border-right-style: solid;
  53.         border-bottom-style: solid;
  54.         border-left-style: solid;
  55.         border-top-color: #79F200;
  56.         border-right-color: #79F200;
  57.         border-bottom-color: #79F200;
  58.         border-left-color: #79F200;
  59.         line-height: 28px;
  60.         background-position: center;
  61.         height: 30px;
  62. }
  63. </STYLE>
  64. </head>

  65. <body>
  66. <br />
  67. <div id="wrap">
  68.   <div align="left" style="margin-bottom:3px">
  69.       <input type="button" id="showtop" onclick="topslider.show();this.style.display='none';document.getElementById('hidetop').style.display='';" value="展开顶部"/>
  70.           <input type="button" id="hidetop" value="关闭顶部" onclick="topslider.hide();this.style.display='none';document.getElementById('showtop').style.display='';" style="display:none"/>
  71.   </div>
  72.   <div id="topwrap">
  73.           <div id="topcontainer" style="display:none"></div>
  74.   </div>
  75.   <div id="bodycontainer">
  76.     <div id="leftcontainer" style="display:none"><br />
  77.         <br />
  78.         <br />
  79.     </div>
  80.     <div align="left">
  81.       <input type="button" id="showleft" value="展开左侧" onclick="leftslider.show();this.style.display='none';document.getElementById('hideleft').style.display='';"/>
  82.       <input type="button" id="hideleft" value="关闭左侧" onclick="leftslider.hide();this.style.display='none';document.getElementById('showleft').style.display='';" style="display:none"/>
  83.     </div>
  84.   </div>
  85.   <div id="bottomcontainer"></div>
  86. </div>

  87. <script language="JavaScript" type="text/javascript">

  88. slider.names = new Array();

  89. function slider()
  90. {
  91.         this.id = slider.names.length;
  92.         slider.names[this.id] = this;
  93.         this.target         = document.getElementById(arguments[0]);        //第一个参数:被操作div的id
  94.         this.direction = arguments[1];//第二个参数:div弹出的方向
  95.         this.height = arguments[2];//第三个参数:div的高度
  96.         this.width = arguments[3];//第四个参数:div的宽度
  97.         this.step = arguments[4];//第五个参数:希望动作分解为几步完成
  98.         this.timer = 10 * arguments[5];//第六个参数:每个动作的间隔时间,10ms为一个单位
  99.         this.startopa = arguments[6];//第七个参数:div开始的透明度
  100.         this.sparent = this.target.parentNode;//获取操作div的父容器
  101.         this.intervalid = null;//循环定时的id
  102.         this.i = 0;//循环的计数器
  103.         this.status = 0;//slider层的状态:0-可以展开;1-不可以展开
  104.         this.target.style.display = "none";//先将div隐去
  105.         return this;
  106. }

  107. slider.prototype.initialize = function()
  108. {
  109.         this.sparent.style.overflow = "hidden";//设置父容器overflow
  110.         this.target.style.width = Number(this.width) + 'px';//设置目标div的宽度
  111.         this.target.style.height = Number(this.height) + 'px';//设置目标div的高度
  112.         this.target.style.position = "";//设置目标div的定位方式
  113.         this.target.style.display = "";//设置目标div的显示方式
  114.         this.target.style.filter = 'Alpha(opacity=' + Number(this.startopa) + ')';//设置目标div的透明度为初始透明度
  115.         this.target.style.overflow = "hidden";//设置overflow
  116.         switch(this.direction)//根据弹出方向设定div的margin
  117.         {
  118.                 case 1://left to right
  119.                         this.target.style.marginLeft = "-" + this.width + "px";
  120.                         break;
  121.                 case 2://top to bottom
  122.                         this.target.style.marginTop = "-" + this.height + "px";
  123.                         break;
  124.                 case 3://right to left
  125.                         this.target.style.marginRight = "-" + this.width + "px";
  126.                         break;
  127.         }
  128. }

  129. slider.prototype.show = function()
  130. {
  131.         if (this.status==0)//检查状态是否已经展开
  132.         {
  133.                 this.initialize();//操作div及其父容器的初始化
  134.                 this.intervalid = window.setInterval("slider.names["+this.id+"].cycle()",this.timer);//设置动作循环
  135.                
  136.         }
  137. }

  138. slider.prototype.hide = function()
  139. {
  140.         if (this.status==1)//检查状态是否已经展开
  141.         {
  142.                 this.intervalid = window.setInterval("slider.names["+this.id+"].decycle()",this.timer);//设置动作循环
  143.                
  144.         }
  145. }

  146. slider.prototype.cycle = function()        //单步循环动作
  147. {
  148.         var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值       
  149.         var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5);//计算每步增加的透明度
  150.         var nopa = Number(opa) + Number(opastep);//当前透明度
  151.         if (nopa>100){this.target.style.filter = 'Alpha(opacity=100)';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值
  152.         switch(this.direction)//根据弹出方向计算和设定div的动作
  153.         {
  154.                 case 1:                //left to right
  155.                         var opx = this.target.style.marginLeft.split("px")[0];
  156.                         var pxstep = Math.round((this.width / this.step)+0.5);
  157.                         var npx = Number(opx) + Number(pxstep);
  158.                         if (npx>0){this.target.style.marginLeft = '0px';}else{this.target.style.marginLeft = String(npx) + 'px';}
  159.                         break;
  160.                 case 2:                //top to bottom
  161.                         var opx = this.target.style.marginTop.split("px")[0];
  162.                         var pxstep = Math.round((this.height / this.step)+0.5);
  163.                         var npx = Number(opx) + Number(pxstep);
  164.                         if (npx>0){this.target.style.marginTop = '0px';}else{this.target.style.marginTop = String(npx) + 'px';}
  165.                         break;
  166.                 case 3:                //right to left
  167.                         var opx = this.target.style.marginRight.split("px")[0];
  168.                         var pxstep = Math.round((this.width / this.step)+0.5);
  169.                         var npx = Number(opx) + Number(pxstep);
  170.                         if (npx>0){this.target.style.marginRight = '0px';}else{this.target.style.marginRight = String(npx) + 'px';}
  171.                         break;
  172.         }
  173.         this.i++        //计数器+1
  174.         if (this.i>(this.step-1)){window.clearInterval(this.intervalid);this.i=0;this.status=1;}        //循环完毕,清除循环定时
  175. }

  176. slider.prototype.decycle = function()        //单步循环动作
  177. {
  178.         var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值       
  179.         var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5)*2;//计算每步增加的透明度
  180.         var nopa = Number(opa) - Number(opastep);//当前透明度
  181.         if (nopa<this.startopa){this.target.style.filter = 'Alpha(opacity=' + this.startopa + ')';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值
  182.        
  183.         switch(this.direction)//根据弹出方向计算和设定div的动作
  184.         {
  185.                 case 1:                //left to right
  186.                         var opx = this.target.style.marginLeft.split("px")[0];
  187.                         var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);
  188.                         var npx = Number(opx) - Number(pxstep);
  189.                         if (Math.abs(npx)>this.width+2){this.target.style.marginLeft = '-' + this.width + 'px';}else{this.target.style.marginLeft = String(npx) + 'px';}
  190.                         break;
  191.                 case 2:                //top to bottom
  192.                         var opx = this.target.style.marginTop.split("px")[0];
  193.                         var pxstep = Math.round((this.height / Math.round(this.step*0.5))+0.5);
  194.                         var npx = Number(opx) - Number(pxstep);
  195.                         if (Math.abs(npx)>this.height+2){this.target.style.marginTop = '-' + this.height + 'px';}else{this.target.style.marginTop = String(npx) + 'px';}
  196.                         break;
  197.                 case 3:                //right to left
  198.                         var opx = this.target.style.marginRight.split("px")[0];
  199.                         var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);
  200.                         var npx = Number(opx) - Number(pxstep);
  201.                         if (Math.abs(npx)>this.width+2){this.target.style.marginRight = '-' + this.width + 'px';}else{this.target.style.marginRight = String(npx) + 'px';}
  202.                         break;
  203.         }
  204.         this.i++        //计数器+1
  205.         if (this.i>(Math.round(this.step*0.5)-1)){window.clearInterval(this.intervalid);this.i=0;this.status=0;this.target.style.display = "none";}        //循环完毕,清除循环定时
  206. }

  207. //关于如何使用这个代码的说明:
  208. //上面的代码可以封装成为一个单独的js文件,然后包含在页面当中
  209. //然后使用下面的代码进行slider初始化,一个页面可以使用多个slider,下面的代码必须在页面底部</body>之前,否则可能会报错
  210. var topslider = new slider('topcontainer',2,80,734,20,2,20);
  211. var leftslider = new slider('leftcontainer',1,398,120,20,1,20);
  212. //参数分别代表的意义可以在代码顶端看到
  213. //控制slider动作可以使用两种方式
  214. //一种是使用下面声明的名字调用,比如topslider.show(),topslider.hide()
  215. //另一种可以使用slider.names[0].show(),slider.names[0].hide(),下标取决于slider初始化的顺序

  216. </script>

  217. </body>
  218. </html>
复制代码运行代码另存代码

使用道具 举报

Rank: 3Rank: 3

升级  99.67%

注册时间
2004-10-11
威望
84
阅读权限
30
积分
499
帖子
70
精华
0
UID
18050
状态
当前离线
发表于 2007-3-2 02:25:53 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
13樓的在FF下有bug
命运总是迂回向前

使用道具 举报

Rank: 2

升级  88.67%

注册时间
2006-6-4
威望
108
阅读权限
20
积分
183
帖子
109
精华
0
UID
52618
状态
当前离线
发表于 2007-3-4 15:14:22 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
原帖由 枫岩 于 2006-11-6 11:30 发表
改了下风云的代码,让其在FF下也可以应用:

<script type="text/javascript">
//Url: http://bbs.51js.com/thread-61646-1-1.html
//Author: 风云突变
//Modify: 枫岩
var act;
functi ...

使用道具 举报

Rank: 1

升级  16%

注册时间
2006-7-25
威望
3
阅读权限
10
积分
8
帖子
5
精华
0
UID
54772
状态
当前离线
发表于 2007-5-2 21:45:23 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料

回复 #8 枫岩 的帖子

请问这个兼容FF的代码,如何改成13楼的使用鼠标点击来控制的呢?:hug:

使用道具 举报

Rank: 3Rank: 3

升级  9.33%

注册时间
2007-4-4
威望
113
阅读权限
30
积分
228
帖子
112
精华
0
UID
67572
状态
当前离线
发表于 2007-5-26 00:25:13 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站
看看这个吧

  1. <style type="text/css">
  2. <!--
  3. body,td,th {
  4.         font-size: 12px;
  5. }
  6. span {cursor:pointer;color:blue;
  7. }
  8. -->
  9. </style>
  10. <script language="JavaScript">
  11. function getElement(aID)
  12. {
  13.   return (document.getElementById) ? document.getElementById(aID)
  14.                                    : document.all[aID];
  15. }

  16. var file_gx;
  17. var f_timeID;
  18. var f_move_step=4;//值越小越平滑,速度越慢
  19. var f_move_speed=8; // 值越小越平滑,速度越慢
  20. function ProductFile(){
  21.         file_gx=Math.abs(parseInt(getElement("div_file").style.height)-150);
  22.         if (f_timeID ==undefined){
  23.                         f_timeID = setTimeout(tween_weatherm_move,f_move_speed);
  24.                 }
  25.         else {
  26.                         clearTimeout(f_timeID);
  27.                         f_timeID = setTimeout(tween_weatherm_move,f_move_speed);
  28.         }
  29. }


  30. function tween_weatherm_move(){
  31.         var wobj=getElement("div_file");
  32.         var cx=parseInt(wobj.style.height);
  33.                 cx+=(file_gx-cx)/f_move_step;
  34.                 cx=parseInt(cx);
  35.                 wobj.style.height=cx+"px";
  36.         if (Math.abs(cx-file_gx)<1){
  37.                 wobj.style.height=file_gx+"px";
  38.                 clearTimeout(f_timeID);
  39.                 f_timeID=undefined;
  40.         }else{
  41.                 f_timeID = setTimeout(tween_weatherm_move,f_move_speed);
  42.         }
  43. }

  44. </script>
  45. <table width="500" border="0" cellpadding="3" cellspacing="1" bgcolor="#999999">
  46.   <tr>
  47.     <td height="25" align="right" bgcolor="#CCCCCC"><span onclick="ProductFile();">点击这里</span></td>
  48.   </tr>
  49.   <tr>
  50.     <td  bgcolor="#FFFFFF" style="height:150px;" id="div_file">&nbsp;</td>
  51.   </tr>
  52. </table>
复制代码运行代码另存代码
http://www.AJan.cn

使用道具 举报

Rank: 3Rank: 3

升级  93%

注册时间
2004-9-10
威望
274
阅读权限
30
积分
479
帖子
275
精华
0
UID
16844
状态
当前离线
发表于 2008-7-1 17:26:04 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ Yahoo! 阿里旺旺 查看个人网站
请问下8楼感应展开后内容放在哪里?
同样是人,有善有恶;同样说爱,有真有假。

使用道具 举报

Rank: 2

升级  2.67%

注册时间
2006-1-5
威望
25
阅读权限
20
积分
54
帖子
25
精华
0
UID
45417
状态
当前离线
发表于 2008-7-2 17:07:08 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料

楼主要的是这种效果吧?

  1. <div id="mydiv" style="width:200px;border:1px solid green">
  2. 航班延迟,我成了机场最后抵达的一批旅客。辉煌的灯火,一盏一盏熄灭在我身后,当走出机场的那一刻。
  3.   热闹的机场,原来,也有寂寞的时候。人去楼空,我回眸与机场对望,带着相互了解的心情。曲终人散,它以寂寥的街灯对应。
  4.   差点回不了家的,还是在最后一秒赶上了最后一班飞机。登机前,我把所有的喜悦、疲惫、忧伤……等沉重的行李一一卸下,决心以幸福的姿势飞翔。
  5.   随身携带的,唯有真爱。
  6. </div>
  7. <input type=button value="collapse" onclick="accordionCollapse(mydiv)"><input type=button value="expand" onclick="accordionExpand(mydiv)">
  8. <script>
  9. /**
  10. *滑动闭合
  11. *@param {Object} 要闭合的div,diplay必须为""
  12. *
  13. */
  14. function accordionCollapse(o)
  15. {
  16.         if(o.processaccordion) return;
  17.         if(o.style.display=="none") return;
  18.         o.processaccordion=true;
  19.         var tmpnode=o.nextSibling;
  20.         if(tmpnode==null||!tmpnode.isAccordion)
  21.          {
  22.           tmpnode=document.createElement("div");
  23.           tmpnode.isAccordion=true;
  24.           tmpnode.style.overflow="hidden";
  25.           var parentNode=o.parentNode;
  26.           parentNode.insertBefore(tmpnode,o.nextSibling);
  27.           }
  28.             //alert(o.offsetWidth+":"+o.clientWidth)
  29.         tmpnode.style.width=o.offsetWidth;
  30.         tmpnode.style.height=o.offsetHeight;
  31.         tmpnode.style.display="";
  32.         o.style.width=o.clientWidth;
  33.         o.style.position='absolute';
  34.         var step=1;
  35.         setTimeout(function(){return accordionIn.apply(o,[{'div':tmpnode,'acc':o,'height':o.offsetHeight,'progress':0,'step':step}])},41)
  36. }

  37. /**
  38. *滑动展开
  39. *@param {Object} 要展开的div,diplay必须为none
  40. *
  41. */
  42. function accordionExpand(o)
  43. {
  44.         if(o.processaccordion) return;
  45.         if(o.style.display!="none") return;
  46.         o.processAccoridion=true;
  47.         var tmpnode=o.nextSibling;
  48.         if(tmpnode==null||!tmpnode.isAccordion)
  49.          {
  50.           tmpnode=document.createElement("div");
  51.           tmpnode.isAccordion=true;
  52.           var parentNode=o.parentNode;
  53.           tmpnode.style.overflow="hidden";
  54.           parentNode.insertBefore(tmpnode,o.nextSibling);
  55.           }

  56.         o.style.display="";
  57.         o.style.width=o.clientWidth;
  58.         o.style.position='absolute';
  59.         tmpnode.style.width=o.offsetWidth;
  60.         tmpnode.style.height=0;
  61.         tmpnode.style.display="";
  62.         var height=o.offsetHeight;
  63.         var step=5;
  64.         var tl=5;
  65.         while(true)
  66.         {
  67.          tl=tl+step*3
  68.          if(tl>=height) {break;}
  69.             else
  70.           step=step*3;
  71.         }
  72.         var s=height-(tl-step*3);
  73.         tmpnode.style.height=s;
  74.         o.style.marginTop=s*-1;
  75.         o.style.clip="rect("+s+" auto auto auto)";
  76.         setTimeout(function(){return accordionOut.apply(o,[{'div':tmpnode,'acc':o,'height':height,'progress':s,'step':step}])},41)
  77. }


  78. function accordionIn(o)
  79. {
  80.         o.progress=o.progress+o.step;
  81.         if(o.step<12)
  82.                 o.step=o.step+1
  83.                else
  84.                 o.step=o.step*3;
  85.         o.acc.style.clip="rect("+o.progress+" auto auto auto)";
  86.         o.acc.style.marginTop=o.progress*-1;
  87.         if(o.height-o.progress<0)
  88.             o.div.style.display="none";
  89.             else
  90.            o.div.style.height=o.height-o.progress;
  91.         if(o.progress>=o.height)
  92.              {
  93.                  o.acc.style.display="none"
  94.                  o.div.style.display="none";
  95.                  o.acc.processaccordion=false;
  96.                 // o.div.parentNode.removeNode(o.div,true);
  97.                  }
  98.            else
  99.             setTimeout(function(){return accordionIn.apply(o,[o])},41)
  100. }


  101. function accordionOut(o)
  102. {
  103.         if(o.height-o.progress<=5) {
  104.               o.progress=o.progress+1;
  105.                  }
  106.          else
  107.         {
  108.             o.progress=o.progress+o.step;
  109.             o.step=o.step/3;
  110.         }
  111.         o.acc.style.clip="rect("+(o.height-o.progress)+" auto auto auto)";
  112.         o.acc.style.marginTop=o.progress-o.height;
  113.         o.div.style.height=o.progress;
  114.         if(o.progress>=o.height)
  115.           {
  116.            o.acc.style.position="static";
  117.            o.div.style.display="none"
  118.            o.acc.processaccordion=false;
  119.           return;
  120.           }
  121.         else
  122.         setTimeout(function(){return accordionOut.apply(o,[o])},41)
  123. }
  124. </script>
复制代码运行代码另存代码

[[I] 本帖最后由 goldduck 于 2008-7-2 17:11 编辑 [/I]]

使用道具 举报

Rank: 4

升级  5.4%

注册时间
2004-11-23
威望
249
阅读权限
50
积分
527
帖子
257
精华
0
UID
20041
状态
当前离线
发表于 2008-11-6 09:36:49 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ
原帖由 [I]biyuan[/I] 于 2006-9-18 13:59 发表
风云突变曾经写过一个比较经典的例子:


var act;
function over(){
var h = parseInt(mytd.height);
if (h < 164){
mytd.height = h + 2;
clearTimeout(act);
act = setTimeout('over()', 10);
}
...
  1. <script language="JavaScript">
  2. var act;
  3. function over(){
  4. var h = parseInt(mytd.height);
  5. if (h < 164){
  6. mytd.height = h + 2;
  7. clearTimeout(act);
  8. act = setTimeout('over()', 10);
  9. }
  10. }
  11. function out(){
  12. var h = parseInt(mytd.height);
  13. if (h > 30){
  14. mytd.height = h - 2;
  15. clearTimeout(act);
  16. act = setTimeout('out()', 10);
  17. }
  18. }
  19. </script>
  20. <table width="316" height="30" border="2" cellpadding="0" cellspacing="0" id="mytd" onMouseOver="over()" onMouseOut="out()">
  21. <tr>
  22. <td>代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠代码实例:层的滑动展开/折叠</td>
  23. </tr>
  24. </table>
复制代码运行代码另存代码

使用道具 举报

您需要登录后才可以回帖 登录 | 加入无忧

Archiver|手机版|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445  

GMT+8, 2012-2-7 21:44 , Processed in 0.071015 second(s), 14 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 1999-2011 无忧脚本

回顶部