首页 / 脚本样式 / JavaScript / 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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js_打开层关闭层效果_脚本之家</title> <style type="text/css"> body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:block; color:#547BC9; float:left; text-decoration:none; margin-top:2px; } a.od:link{ background:#EEF1F8; } a.od:visited{ background:#EEF1F8; } a.od:hover{ background:#EEE; } a.od:active{ background:#EEE; } #fd{ width:500px; height:200px; background:#EDF1F8; border: 2px solid #849BCA; margin-top:2px; margin-left:2px; float:left; overflow:hidden; position:absolute; left:0px; top:0px; cursor:move; float:left; /*filter:alpha（opacity=50）;*/} .content{ padding:10px; } </style> </head> <body> [打开层] [关闭层]移动层 <script type="text/javascript"> var prox; var proy; var proxc; var proyc; function show（id）{/*--打开--*/ clearInterval（prox）; clearInterval（proy）; clearInterval（proxc）; clearInterval（proyc）; var o = document.getElementById（id）; o.style.display = "block"; o.style.width = "1px"; o.style.height = "1px";prox = setInterval（function（）{openx（o,500）},10）; } function openx（o,x）{/*--打开x--*/ var cx = parseInt（o.style.width）; if（cx < x） { o.style.width = （cx + Math.ceil（（x-cx）/5）） +"px"; } else { clearInterval（prox）; proy = setInterval（function（）{openy（o,200）},10）; } } function openy（o,y）{/*--打开y--*/ var cy = parseInt（o.style.height）; if（cy < y） { o.style.height = （cy + Math.ceil（（y-cy）/5）） +"px"; } else { clearInterval（proy）; } } function closeed（id）{/*--关闭--*/ clearInterval（prox）; clearInterval（proy）; clearInterval（proxc）; clearInterval（proyc）; var o = document.getElementById（id）; if（o.style.display == "block"） { proyc = setInterval（function（）{closey（o）},10）; } } function closey（o）{/*--打开y--*/ var cy = parseInt（o.style.height）; if（cy > 0） { o.style.height = （cy - Math.ceil（cy/5）） +"px"; } else { clearInterval（proyc）; proxc = setInterval（function（）{closex（o）},10）; } } function closex（o）{/*--打开x--*/ var cx = parseInt（o.style.width）; if（cx > 0） { o.style.width = （cx - Math.ceil（cx/5）） +"px"; } else { clearInterval（proxc）; o.style.display = "none"; } } /*-------------------------鼠标拖动---------------------*/ var od = document.getElementById（"fd"）; var dx,dy,mx,my,mouseD; var odrag; var isIE = document.all ？ true : false; document.onmousedown = function（e）{ var e = e ？ e : event; if（e.button == （document.all ？ 1 : 0）） { mouseD = true; } } document.onmouseup = function（）{ mouseD = false; odrag = ""; if（isIE） { od.releaseCapture（）; od.filters.alpha.opacity = 100; } else { window.releaseEvents（od.MOUSEMOVE）; od.style.opacity = 1; } } //function readyMove（e）{ od.onmousedown = function（e）{ odrag = this; var e = e ？ e : event; if（e.button == （document.all ？ 1 : 0）） { mx = e.clientX; my = e.clientY; od.style.left = od.offsetLeft + "px"; od.style.top = od.offsetTop + "px"; if（isIE） { od.setCapture（）; od.filters.alpha.opacity = 50; } else { window.captureEvents（Event.MOUSEMOVE）; od.style.opacity = 0.5; }//alert（mx）; //alert（my）;}} document.onmousemove = function（e）{ var e = e ？ e : event;//alert（mrx）; //alert（e.button）; if（mouseD==true && odrag） { var mrx = e.clientX - mx; var mry = e.clientY - my; od.style.left = parseInt（od.style.left） +mrx + "px"; od.style.top = parseInt（od.style.top） + mry + "px"; mx = e.clientX; my = e.clientY;} } </script> </body> </html>

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