本文介绍如何使用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> <div id="bodyL"> [打开层] [关闭层] </div> <div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;"> <div class="content">移动层</div> </div> </body> </html>注意：若引入外部JavaScript文件，需刷新页面后方可执行相关效果。