[JS效果]动画效果打开/关闭层

                   
                                                                好久没来发帖了，呵呵，今天转个动画效果 DOM_text01body,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;} [打开层]  [关闭层]   移动层   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 { 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 { 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; } }