javascript动画效果打开/关闭层_javascript技巧

来源：好心意情感网

<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> 
 
 
 [打开层] 
 
 
 [关闭层] 
 
 
 
 移动层 
 
 
 
 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需刷新才能执行]

显示全文

全部频道

javascript动画效果打开/关闭层_javascript技巧