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_打开层关闭层效果_html中文网</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> <div id="bodyL">     <a href="#" class="od" onclick="show('fd');return false;">         [打开层]     </a><a href="#" class="od" onclick="closeed('fd');return false;">         [关闭层]     </a></div><div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">     <div class="content">移动层</div></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

以上就是javascript动画效果打开/关闭层的详细内容，更多请关注0133技术站其它相关文章！