纯CSS实现圆角、可拖动的一个DIV模块层

mac2022-06-30  74

<style>body{ margin:0px; padding:0px; font-size:14px;}#t { position:absolute; float:left; left:0px; top:0px;}#a { float:left;}.al { opacity: 0.80; filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80,finishOpacity=100);}.al2{ opacity: 0.00; filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=100);}U { DISPLAY: block; OVERFLOW: hidden; HEIGHT: 1px}U.f1 { background-color:#5cc; BACKGROUND: #5cc; MARGIN: 0px 3px}U.f2 { background-color:#5cc; BORDER-RIGHT: #5cc 2px solid; MARGIN: 0px 1px; BORDER-LEFT: #5cc 2px solid}U.f3 { background-color:#5cc; BORDER-RIGHT: #5cc 1px solid; MARGIN: 0px 1px; BORDER-LEFT: #5cc 1px solid}.d_top{ clear:both; overflow:hidden; background-color:#5cc; height:29px; vertical-align:bottom;}.d_top a{ float:right; margin-top:5px; margin-right:13px; padding-top:3px; width:18px; color:red; background-color:#789; text-decoration:none; font-weight:bold; text-align:center; vertical-align:middle;}.d_top span{ float:left; font-size:13px; margin-left:15px; margin-top:8px;}.d_body { BORDER-RIGHT: #5cc 3px solid; BORDER-LEFT: #5cc 3px solid; padding:10px; height:200px; background-color:#fff;}.d_foot{ clear:both; overflow:hidden; background-color:#5cc; height:2px;}</style><script type="text/javascript"> function $(id){return document.getElementById(id);} function show(id){ var t = $(id); t.style.width=document.body.clientWidth; t.style.height=document.body.clientHeight; window.οnresize=function(){ t.style.width=document.body.clientWidth; t.style.height=document.body.clientHeight; } $(id).style.display=""; } function cl(id){ $(id).style.display="none"; }function moveEvent(e,id){ var isIE = (document.all)?true:false; drag = true; xx=isIE?event.x:e.pageX; yy=isIE?event.y:e.pageY; L = document.getElementById(id).offsetLeft; T = document.getElementById(id).offsetTop; document.onmousemove = function(e) { if (drag) { x=isIE?event.x:e.pageX; if(x<0)x=0; y=isIE?event.y:e.pageY; if(y<0)y=0; document.getElementById(id).style.left = L-xx+x; document.getElementById(id).style.top = T-yy+y; } } document.οnmοuseup=function(){ drag = false; }}window.οnscrοll=function(){ $("back_div").style.width=document.body.scrollWidth; $("back_div").style.height=document.body.scrollHeight;}</script><body> <div id="a" style="position:absolute; left:300px; top:200px;"> <a href="javascript:" onClick="show('t')">点这里哦!</a> </div> <div id="t" style="display:none;"> <div style="width:100%;height:100%; z-index:-1; position:absolute; float:left; background-color:#555;overflow:hidden;" class="al" id="back_div"> <iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe> </div> <DIV style="WIDTH: 500px; position:absolute;float:left;top:25%; left:30%; z-index:999; clear:both; overflow:hidden;" id="t_div"> <iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe> <U class="f1"></U><U class="f2"></U><U class="f3"></U> <div class="d_top" onMouseDown="moveEvent(event,'t_div')"> <span>欢迎光临</span> <a href="javascript:" onClick="cl('t')">×</a> </div> <DIV class="d_body" >做体验最好的源码站。 </DIV> <div class="d_foot"></div> <U class="f3"></U><U class="f2"></U><U class="f1"></U> </DIV> </div></body>

转载于:https://www.cnblogs.com/hgj123/p/3658238.html

最新回复(0)