DIV层之拖动、关闭、打开效果代码

非常不错的效果，适合在当前页打开测试窗口，图片等

<!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>div托动，打开，关闭效果</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><<a href="https://www.0133.cn">html中文网</a></body></html>

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

以上就是DIV层之拖动、关闭、打开效果代码的详细内容，更多请关注0133技术站其它相关文章！