CSS+JS拖动层附半透明阴影网络开发images/icons/14.gif<style type="text/css"><!-- #layer { position:absolute; z-index:auto; padding:0px 0px; margin:0px 0px; width:607px; } #layer #win { float:left; background-color:#EEEEEE; width:600px; border:1px solid #000000; margin:0px 0px; padding:0px 0px; } #layer #win #winTitle { cursor:move; font-family:Verdana; font-weight:bold; font-size:14px; padding:10px 10px; background-color:#EEEEEE; color:#CC0000; -moz-user-select:none; } #layer #win #winClose { cursor:pointer; font-family:Verdana; font-weight:normal; font-size:9px; padding:10px 10px; color:#666666; position:relative; float:right; } #layer #win #winBody { padding:5px 10px; font-family:Verdana; font-size:10px; background-color:#FFFFFF; } #layer #win #winFoot { text-align:center; padding:10px 10px; background-color:#EEEEEE; } #layer .shadow { background-color:#000000; FILTER: alpha(opacity=50); opacity: 0.5; moz-opacity: .5; overflow:hidden; } #layer #shadow1 { float:left; margin:5px 0px 0px 0px; padding:0px 0px; width:5px; } #layer #shadow2 { clear:both; margin:0px 0px 0px 5px; padding:0px 0px; width:600px; height:5px; } --></style> <div id="layer"> <div id="win"> <div id="winClose" onclick="changeClose();">CLOSE</div> <div id="winTitle">Title</div> <div id="winBody">Body</div> <div id="winFoot">Foot</div> </div> <div id="shadow1" class="shadow"></div> <div id="shadow2" class="shadow"></div> </div> <script type="text/javascript">//<!-- function changeClose(){ document.getElementById("layer").style.display="none"; } function autoHeight(o1,o2){ var h=o1.offsetHeight-5; o2.style.height=h+"px"; } autoHeight(document.getElementById("win"),document.getElementById("shadow1")); function drag(o1,o2){ o1.onselectstart=function() {return(false)}; o1.onmousedown=function(e){ e=e||window.event; e.cancelBubble = true; var x=e.layerX||e.offsetX; var y=e.layerY||e.offsetY; document.onmousemove=function(e){ e=e||window.event; o2.style.left=(e.clientX-x)+"px"; o2.style.top=(e.clientY-y)+"px"; }; document.onmouseup=function(){document.onmousemove=null;}; }; } drag(document.getElementById("winTitle"),document.getElementById("layer")); //--></script> 文章来自: CenFun Blog]]>2007-06-13 01:47:002007-06-17 01:41:0002666