用Javascript 编写可以缓慢弹出收缩的层

代码如下：

<！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> <title>层的扩展与收缩</title> </head> <body> <script type="text/javascript"> function StretchDiv（divid,color）{ var target; var flag=false; var onMouseDown=function（）{ if（flag）{ var h=parseInt（target.style.height）; onMouseDown.shortDiv=function（）{ h=h-1; if（h<20）{ return; } target.style.height=h+"px"; setTimeout（onMouseDown.shortDiv,30）; } onMouseDown.shortDiv（）; } else { //target.style.height=parseInt（target.style.height）+180+"px"; var h=parseInt（target.style.height）; onMouseDown.longDiv=function（）{ h=h+1; if（h>200）{ return; } target.style.height=h+"px"; setTimeout（onMouseDown.longDiv,30）; } onMouseDown.longDiv（）; } flag=！flag; } function init（）{ target=document.getElementById（divid）; target.style.position = "absolute"; target.style.width = "200px"; target.style.height = "20px"; target.style.left = "100px"; target.style.top = "100px"; target.style.backgroundColor = color; target.onmousedown = onMouseDown; } init（）; } new StretchDiv（"div1","blue"）; </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]