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

2019-11-21 01:03:46

字体：大中小

来源：转载

供稿：网友

代码如下：

<!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> <div id="div1"> </div> <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需刷新才能执行]

上一篇：再谈ie和firefox下的document.all属性

下一篇：javascript void(0)的妙用