如何让一个层慢慢增高展开,有种向下滑动的效果 - JavaScript & VBScript & DHTML 脚本技术讨论版 - 无忧脚本 -//体验编写HTML代码的乐趣

ylwlf

爬虫

UID 17384
精华 0
积分 109
帖子 40
威望 35
阅读权限 20
注册 2004-9-22
状态离线

#1

大中小

使用道具

发表于 2006-9-15 09:42 资料个人空间短消息加为好友

如何让一个层慢慢增高展开,有种向下滑动的效果

点击展开时
让一个层慢慢增高展开有种向下滑动的效果
点关闭时又慢慢合拢...

谢谢

joelee

大恐龙

UID 31656
精华 0
积分 933
帖子 631
威望 608
阅读权限 50
注册 2005-6-21
来自成都
状态离线

#2

大中小

使用道具

发表于 2006-9-15 12:08 资料个人空间短消息加为好友

HTMLObject.style.height=i+"px";
i++

ylwlf

爬虫

UID 17384
精华 0
积分 109
帖子 40
威望 35
阅读权限 20
注册 2004-9-22
状态离线

#3

大中小

使用道具

发表于 2006-9-16 11:19 资料个人空间短消息加为好友

?

野草

霸王龙

UID 36208
精华 0
积分 1338
帖子 813
威望 818
阅读权限 70
注册 2005-8-29
来自延吉
状态离线

#4

大中小

使用道具

发表于 2006-9-18 13:12 资料个人空间短消息加为好友

好像要用setTimeOut

无忧脚本群：21643964
我的站：http://www.pao-cai.net

biyuan

超级版主

振兴无忧

UID 4354
精华 5
积分 5272
帖子 2719
威望 2934
阅读权限 150
注册 2003-7-13
状态离线

#5

大中小

使用道具

发表于 2006-9-18 13:59 资料个人空间主页短消息加为好友

风云突变曾经写过一个比较经典的例子：

提示：您可以先修改部分代码再运行

如果您需要提问题之前，请先尝试以下两个链接：
http://bbs.51js.com/search.php
http://bbs.51js.com/viewthread.php?tid=21031
===============================
先无忧之忧而忧，后无忧之乐而乐。

ylwlf

爬虫

UID 17384
精华 0
积分 109
帖子 40
威望 35
阅读权限 20
注册 2004-9-22
状态离线

#6

大中小

使用道具

发表于 2006-10-10 12:14 资料个人空间短消息加为好友

上面的例子都设置了高度的.如果不设置高度呢

a2a2a2

小恐龙

UID 7687
精华 0
积分 395
帖子 230
威望 238
阅读权限 30
注册 2004-1-2
来自浙江温州
状态离线

#7

大中小

使用道具

发表于 2006-10-10 13:06 资料个人空间短消息加为好友

如果不设置度。
脚本里
height改成offsetHeight

枫岩

小恐龙

UID 7576
精华 1
积分 211
帖子 51
威望 73
阅读权限 30
注册 2003-12-28
来自中国湖南
状态离线

#8

大中小

使用道具

发表于 2006-11-6 11:30 资料个人空间主页短消息加为好友

改了下风云的代码，让其在FF下也可以应用：

提示：您可以先修改部分代码再运行

fangxiao9159

爬虫

UID 23822
精华 0
积分 68
帖子 24
威望 22
阅读权限 20
注册 2005-2-21
状态离线

#9

大中小

使用道具

发表于 2006-11-6 11:33 资料个人空间短消息加为好友

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

提示：您可以先修改部分代码再运行

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

ajaxian

小恐龙

UID 52649
精华 0
积分 219
帖子 129
威望 128
阅读权限 30
注册 2006-6-5
状态离线

#10

大中小

使用道具

发表于 2006-11-6 11:37 资料个人空间短消息加为好友

很多库是做这个的 moo.fx 最专业， jsLINB 的 fx 可是，最近还有个 animator.js

阿牧

小恐龙

UID 15624
精华 0
积分 263
帖子 148
威望 141
阅读权限 30
注册 2004-8-16
来自河北唐山
状态离线

#11

大中小

使用道具

发表于 2007-2-28 17:09 资料个人空间主页短消息加为好友

留一个脚印吧，，第二个效果挺好的。

lpdownload

小恐龙

UID 65204
精华 0
积分 243
帖子 126
威望 122
阅读权限 30
注册 2007-2-2
状态离线

#12

大中小

使用道具

发表于 2007-2-28 17:41 资料个人空间短消息加为好友

都挺好，不过第2个更爽些

aspxer

小恐龙

UID 22816
精华 0
积分 269
帖子 89
威望 101
阅读权限 30
注册 2005-1-22
状态离线

#13

大中小

使用道具

发表于 2007-2-28 22:52 资料个人空间短消息加为好友

我写过一个类，不知道是不是你要的这种。

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><STYLE>	body {	background-color: #EEEEEE;	margin: 0px;	text-align: center;	}	#wrap {	width: 736px;	background-color: #FFFFFF;	overflow: hidden;	margin: 12px;	padding: 12px;	}	#topcontainer {	height: 80px;	width: 732px;	background-color: #99FF66;	border: 1px solid #79F200;	}	#bodycontainer {	height: 400px;	width: 100%;	margin-top: 12px;	}	#bottomcontainer {	height: 60px;	width: 100%;	margin-top: 12px;	}	#topwrap {	width: 100%;	}	#leftcontainer {	background-color: #99FF66;	height: 400px;	width: 120px;	float: left;	border: 1px solid #79F200;}input {	background-color: #99FF66;	border-top-width: 1px;	border-right-width: 1px;	border-bottom-width: 1px;	border-left-width: 1px;	border-top-style: solid;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-top-color: #79F200;	border-right-color: #79F200;	border-bottom-color: #79F200;	border-left-color: #79F200;	line-height: 28px;	background-position: center;	height: 30px;}</STYLE> </head><body><br /><div id="wrap">  <div align="left" style="margin-bottom:3px">      <input type="button" id="showtop" onclick="topslider.show();this.style.display='none';document.getElementById('hidetop').style.display='';" value="展开顶部"/>	  <input type="button" id="hidetop" value="关闭顶部" onclick="topslider.hide();this.style.display='none';document.getElementById('showtop').style.display='';" style="display:none"/>  </div>  <div id="topwrap">  	<div id="topcontainer" style="display:none"></div>  </div>  <div id="bodycontainer">    <div id="leftcontainer" style="display:none"><br />        <br />        <br />    </div>    <div align="left">      <input type="button" id="showleft" value="展开左侧" onclick="leftslider.show();this.style.display='none';document.getElementById('hideleft').style.display='';"/>      <input type="button" id="hideleft" value="关闭左侧" onclick="leftslider.hide();this.style.display='none';document.getElementById('showleft').style.display='';" style="display:none"/>    </div>  </div>  <div id="bottomcontainer"></div></div><script language="JavaScript" type="text/javascript">slider.names = new Array();function slider(){	this.id = slider.names.length;	slider.names[this.id] = this;	this.target	 = document.getElementById(arguments[0]);	//第一个参数：被操作div的id	this.direction = arguments[1];//第二个参数：div弹出的方向	this.height = arguments[2];//第三个参数：div的高度	this.width = arguments[3];//第四个参数：div的宽度	this.step = arguments[4];//第五个参数：希望动作分解为几步完成	this.timer = 10 * arguments[5];//第六个参数：每个动作的间隔时间，10ms为一个单位	this.startopa = arguments[6];//第七个参数：div开始的透明度	this.sparent = this.target.parentNode;//获取操作div的父容器	this.intervalid = null;//循环定时的id	this.i = 0;//循环的计数器	this.status = 0;//slider层的状态：0-可以展开；1-不可以展开	this.target.style.display = "none";//先将div隐去	return this;}slider.prototype.initialize = function(){	this.sparent.style.overflow = "hidden";//设置父容器overflow	this.target.style.width = Number(this.width) + 'px';//设置目标div的宽度	this.target.style.height = Number(this.height) + 'px';//设置目标div的高度	this.target.style.position = "";//设置目标div的定位方式	this.target.style.display = "";//设置目标div的显示方式	this.target.style.filter = 'Alpha(opacity=' + Number(this.startopa) + ')';//设置目标div的透明度为初始透明度	this.target.style.overflow = "hidden";//设置overflow	switch(this.direction)//根据弹出方向设定div的margin	{		case 1://left to right			this.target.style.marginLeft = "-" + this.width + "px";			break;		case 2://top to bottom			this.target.style.marginTop = "-" + this.height + "px";			break;		case 3://right to left			this.target.style.marginRight = "-" + this.width + "px";			break;	}}slider.prototype.show = function(){	if (this.status==0)//检查状态是否已经展开	{		this.initialize();//操作div及其父容器的初始化		this.intervalid = window.setInterval("slider.names["+this.id+"].cycle()",this.timer);//设置动作循环			}}slider.prototype.hide = function(){	if (this.status==1)//检查状态是否已经展开	{		this.intervalid = window.setInterval("slider.names["+this.id+"].decycle()",this.timer);//设置动作循环			}}slider.prototype.cycle = function()	//单步循环动作{	var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值		var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5);//计算每步增加的透明度	var nopa = Number(opa) + Number(opastep);//当前透明度	if (nopa>100){this.target.style.filter = 'Alpha(opacity=100)';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值	switch(this.direction)//根据弹出方向计算和设定div的动作	{		case 1:		//left to right			var opx = this.target.style.marginLeft.split("px")[0];			var pxstep = Math.round((this.width / this.step)+0.5);			var npx = Number(opx) + Number(pxstep);			if (npx>0){this.target.style.marginLeft = '0px';}else{this.target.style.marginLeft = String(npx) + 'px';}			break;		case 2:		//top to bottom			var opx = this.target.style.marginTop.split("px")[0];			var pxstep = Math.round((this.height / this.step)+0.5);			var npx = Number(opx) + Number(pxstep);			if (npx>0){this.target.style.marginTop = '0px';}else{this.target.style.marginTop = String(npx) + 'px';}			break;		case 3:		//right to left			var opx = this.target.style.marginRight.split("px")[0];			var pxstep = Math.round((this.width / this.step)+0.5);			var npx = Number(opx) + Number(pxstep);			if (npx>0){this.target.style.marginRight = '0px';}else{this.target.style.marginRight = String(npx) + 'px';}			break;	}	this.i++	//计数器+1	if (this.i>(this.step-1)){window.clearInterval(this.intervalid);this.i=0;this.status=1;}	//循环完毕，清除循环定时}slider.prototype.decycle = function()	//单步循环动作{	var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值		var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5)*2;//计算每步增加的透明度	var nopa = Number(opa) - Number(opastep);//当前透明度	if (nopa<this.startopa){this.target.style.filter = 'Alpha(opacity=' + this.startopa + ')';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值		switch(this.direction)//根据弹出方向计算和设定div的动作	{		case 1:		//left to right			var opx = this.target.style.marginLeft.split("px")[0];			var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);			var npx = Number(opx) - Number(pxstep);			if (Math.abs(npx)>this.width+2){this.target.style.marginLeft = '-' + this.width + 'px';}else{this.target.style.marginLeft = String(npx) + 'px';}			break;		case 2:		//top to bottom			var opx = this.target.style.marginTop.split("px")[0];			var pxstep = Math.round((this.height / Math.round(this.step*0.5))+0.5);			var npx = Number(opx) - Number(pxstep);			if (Math.abs(npx)>this.height+2){this.target.style.marginTop = '-' + this.height + 'px';}else{this.target.style.marginTop = String(npx) + 'px';}			break;		case 3:		//right to left			var opx = this.target.style.marginRight.split("px")[0];			var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);			var npx = Number(opx) - Number(pxstep);			if (Math.abs(npx)>this.width+2){this.target.style.marginRight = '-' + this.width + 'px';}else{this.target.style.marginRight = String(npx) + 'px';}			break;	}	this.i++	//计数器+1	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";}	//循环完毕，清除循环定时}//关于如何使用这个代码的说明：//上面的代码可以封装成为一个单独的js文件，然后包含在页面当中//然后使用下面的代码进行slider初始化，一个页面可以使用多个slider，下面的代码必须在页面底部</body>之前，否则可能会报错var topslider = new slider('topcontainer',2,80,734,20,2,20);var leftslider = new slider('leftcontainer',1,398,120,20,1,20);//参数分别代表的意义可以在代码顶端看到//控制slider动作可以使用两种方式//一种是使用下面声明的名字调用，比如topslider.show(),topslider.hide()//另一种可以使用slider.names[0].show(),slider.names[0].hide()，下标取决于slider初始化的顺序</script></body></html>

提示：您可以先修改部分代码再运行

manng

小恐龙

UID 18050
精华 0
积分 430
帖子 70
威望 84
阅读权限 30
注册 2004-10-11
状态离线

#14

大中小

使用道具

发表于 2007-3-2 02:25 资料个人空间短消息加为好友

13樓的在FF下有bug

命运总是迂回向前

hasp

爬虫

UID 52618
精华 0
积分 177
帖子 105
威望 104
阅读权限 20
注册 2006-6-4
状态离线

#15

大中小

使用道具

发表于 2007-3-4 15:14 资料个人空间短消息加为好友

QUOTE:

原帖由 [i]枫岩[/i] 于 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 ...

ModernSky

小虫

UID 54772
精华 0
积分 8
帖子 5
威望 3
阅读权限 10
注册 2006-7-25
状态离线

#16

大中小

使用道具

发表于 2007-5-2 21:45 资料个人空间短消息加为好友

回复 #8 枫岩的帖子

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

AJan

小恐龙

UID 67572
精华 0
积分 225
帖子 112
威望 113
阅读权限 30
注册 2007-4-4
来自湖北
状态离线

#17

大中小

使用道具

发表于 2007-5-26 00:25 资料个人空间主页短消息加为好友

看看这个吧

提示：您可以先修改部分代码再运行

http://www.AJan.cn

一叶飘红

小恐龙

UID 16844
精华 0
积分 425
帖子 254
威望 253
阅读权限 30
注册 2004-9-10
来自 Xi'an,Shaanxi,China
状态离线

#18

大中小

使用道具

发表于 2008-7-1 17:26 资料个人空间主页短消息加为好友

请问下8楼感应展开后内容放在哪里？

同样是人，有善有恶；同样说爱，有真有假……

goldduck

爬虫

UID 45417
精华 0
积分 54
帖子 25
威望 25
阅读权限 20
注册 2006-1-5
状态离线

#19

大中小

使用道具

发表于 2008-7-2 17:07 资料个人空间短消息加为好友

楼主要的是这种效果吧?

<div id="mydiv" style="width:200px;border:1px solid green">航班延迟，我成了机场最后抵达的一批旅客。辉煌的灯火，一盏一盏熄灭在我身后，当走出机场的那一刻。 　　热闹的机场，原来，也有寂寞的时候。人去楼空，我回眸与机场对望，带着相互了解的心情。曲终人散，它以寂寥的街灯对应。 　　差点回不了家的，还是在最后一秒赶上了最后一班飞机。登机前，我把所有的喜悦、疲惫、忧伤……等沉重的行李一一卸下，决心以幸福的姿势飞翔。 　　随身携带的，唯有真爱。 </div><input type=button value="collapse" onclick="accordionCollapse(mydiv)"><input type=button value="expand" onclick="accordionExpand(mydiv)"><script>/***滑动闭合*@param {Object} 要闭合的div,diplay必须为""**/function accordionCollapse(o){	if(o.processaccordion) return;	if(o.style.display=="none") return;	o.processaccordion=true;	var tmpnode=o.nextSibling;	if(tmpnode==null||!tmpnode.isAccordion)	 {	  tmpnode=document.createElement("div");	  tmpnode.isAccordion=true;	  tmpnode.style.overflow="hidden";	  var parentNode=o.parentNode;	  parentNode.insertBefore(tmpnode,o.nextSibling);	  }	    //alert(o.offsetWidth+":"+o.clientWidth)	tmpnode.style.width=o.offsetWidth;	tmpnode.style.height=o.offsetHeight;	tmpnode.style.display="";	o.style.width=o.clientWidth;	o.style.position='absolute';	var step=1;	setTimeout(function(){return accordionIn.apply(o,[{'div':tmpnode,'acc':o,'height':o.offsetHeight,'progress':0,'step':step}])},41)}/***滑动展开*@param {Object} 要展开的div,diplay必须为none**/function accordionExpand(o){	if(o.processaccordion) return;	if(o.style.display!="none") return;	o.processAccoridion=true;	var tmpnode=o.nextSibling;	if(tmpnode==null||!tmpnode.isAccordion)	 {	  tmpnode=document.createElement("div");	  tmpnode.isAccordion=true;	  var parentNode=o.parentNode;	  tmpnode.style.overflow="hidden";	  parentNode.insertBefore(tmpnode,o.nextSibling);	  }	o.style.display="";	o.style.width=o.clientWidth;	o.style.position='absolute';	tmpnode.style.width=o.offsetWidth;	tmpnode.style.height=0;	tmpnode.style.display="";	var height=o.offsetHeight;	var step=5;	var tl=5;	while(true)	{	 tl=tl+step*3	 if(tl>=height) {break;}	    else	  step=step*3;	}	var s=height-(tl-step*3);	tmpnode.style.height=s;	o.style.marginTop=s*-1;	o.style.clip="rect("+s+" auto auto auto)";	setTimeout(function(){return accordionOut.apply(o,[{'div':tmpnode,'acc':o,'height':height,'progress':s,'step':step}])},41)}function accordionIn(o){	o.progress=o.progress+o.step;	if(o.step<12)	        o.step=o.step+1	       else	        o.step=o.step*3;	o.acc.style.clip="rect("+o.progress+" auto auto auto)";	o.acc.style.marginTop=o.progress*-1;	if(o.height-o.progress<0)	    o.div.style.display="none";	    else	   o.div.style.height=o.height-o.progress;	if(o.progress>=o.height)	     {		 o.acc.style.display="none"		 o.div.style.display="none";		 o.acc.processaccordion=false;		// o.div.parentNode.removeNode(o.div,true);		 }	   else	    setTimeout(function(){return accordionIn.apply(o,[o])},41)}function accordionOut(o){	if(o.height-o.progress<=5) {	      o.progress=o.progress+1;		 }	 else	{	    o.progress=o.progress+o.step;	    o.step=o.step/3;	}	o.acc.style.clip="rect("+(o.height-o.progress)+" auto auto auto)";	o.acc.style.marginTop=o.progress-o.height;	o.div.style.height=o.progress;	if(o.progress>=o.height)	  {	   o.acc.style.position="static";	   o.div.style.display="none"	   o.acc.processaccordion=false;	  return;	  }	else	setTimeout(function(){return accordionOut.apply(o,[o])},41)}</script>

提示：您可以先修改部分代码再运行

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