 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 简单的层展开和收缩代码 |
| 来源：JavaEye 更新时间：2010/9/27 7:43:08 阅读次数： 我要投稿 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<SCRIPT type="text/javascript">
function expand(){
var obj = document.getElementById("bb");
var h1 = obj.scrollHeight;
var h2 = obj.offsetHeight;
h2h2 = h2 + 5;
if(h2h2 < h1){
obj.style.height = h2h2;
setTimeout("expand()",2);
}else{
obj.style.height = h1;
document.getElementById('aa').innerHTML = "收缩";
}
}
function contract(){
var obj = document.getElementById("bb");
var h2 = obj.offsetHeight;
h2h2 = h2-5;
if(h2h2 > 0){
obj.style.height = h2h2;
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>2</TD>
<TD>2</TD>
<TD>2</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>3</TD>
<TD>3</TD>
<TD>3</TD>
</TR>
</TABLE>
</div>
</div>
</BODY>
</HTML> |
|
| 上一篇文章： JQuery EasyValidator表单验证插件下一篇文章： 可应用到多个层的拖动层效果 |
|
|
|
注册 登录
