层收缩效果带滑动

最新推荐文章于 2021-04-01 06:12:56 发布

iteye_194

最新推荐文章于 2021-04-01 06:12:56 发布

阅读量124

点赞数

分类专栏： javascript 文章标签： HTML

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
	function expand(){		
		var obj = document.getElementById("bb");
		var h1 = obj.scrollHeight;
		var h2 = obj.offsetHeight;
		h2=h2+5;
		if(h2<h1){
			obj.style.height=h2;
			setTimeout("expand()",2);
		}else{
			obj.style.height=h1;
			document.getElementById('aa').innerHTML="收缩";
		}
	}
	function contract(){
		var obj = document.getElementById("bb");
		var h2 = obj.offsetHeight;
		h2 = h2-5;
		if(h2>0){
			obj.style.height=h2;
			setTimeout("contract()",2);
		}else{
			obj.style.height=1;
			obj.style.visibility="hidden";
			document.getElementById('aa').innerHTML="展开";
		}
	}
	function test(){
		var obj = document.getElementById("bb");
		//隐藏
		if(obj.style.visibility!="hidden")
		{	
			obj.style.visiblity="visible";
			setTimeout("contract()",2);
		}
		//展开
		else{
			obj.style.height = 1;
			obj.style.visibility="visible";
			setTimeout("expand()",2);
		}
	}
//-->
</SCRIPT>
 <BODY>
  <div>
	<div id="aa" style="background:#CCFFFF" onclick="test()">展开</div>
	<div id="bb" style="visibility:hidden;overflow-x:hidden;overflow:auto;overflow-y:hidden;background:#99FFFF;">
	<TABLE>
	<TR>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
	</TR>
	<TR>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
	</TR>
	<TR>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
	</TR>
	</TABLE>
	</div>
  </div>
 </BODY>
</HTML>