|
热门文章 |
|
|
|
相关文章 |
|
没有相关文章 |
|
|
简单的层展开和收缩代码 |
来源: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表单验证插件下一篇文章: 可应用到多个层的拖动层效果 |
|
|