本文实例讲述了JS+CSS实现可拖拽的漂亮圆角特效弹出层的方法。分享给大家供大家参考。具体如下： 复制代码 代码如下: JS+CSS实现的可拖拽的漂亮圆角效果的弹出层 <br /> body{<br /> margin:0px;<br /> padding:0px;<br /> font-size:14px;<br /> }<br /> #t {<br /> position:absolute;<br /> float:left;<br /> left:0px;<br /> top:0px;<br /> }<br /> #a {<br /> float:left;<br /> }<br /> .al {<br /> opacity: 0.80;<br /> filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80,finishOpacity=100);<br /> }<br /> .al2{<br /> opacity: 0.00;<br /> filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=100);<br /> }<br /> U {<br /> DISPLAY: block;<br /> OVERFLOW: hidden;<br /> HEIGHT: 1px<br /> }<br /> U.f1 {<br /> background-color:#5cc;<br /> BACKGROUND: #5cc;<br /> MARGIN: 0px 3px<br /> }<br /> U.f2 {<br /> background-color:#5cc;<br /> BORDER-RIGHT: #5cc 2px solid;<br /> MARGIN: 0px 1px;<br /> BORDER-LEFT: #5cc 2px solid<br /> }<br /> U.f3 {<br /> background-color:#5cc;<br /> BORDER-RIGHT: #5cc 1px solid;<br /> MARGIN: 0px 1px;<br /> BORDER-LEFT: #5cc 1px solid<br /> }<br /> .d_top{<br /> clear:both;<br /> overflow:hidden;<br /> background-color:#5cc;<br /> height:29px;<br /> vertical-align:bottom;<br /> }<br /> .d_top a{<br /> float:right;<br /> margin-top:5px;<br /> margin-right:13px;<br /> padding-top:3px;<br /> width:18px;<br /> color:red;<br /> background-color:#789;<br /> text-decoration:none;<br /> font-weight:bold;<br /> text-align:center;<br /> vertical-align:middle;<br /> }<br /> .d_top span{<br /> float:left;<br /> font-size:13px;<br /> margin-left:15px;<br /> margin-top:8px;<br /> }<br /> .d_body {<br /> BORDER-RIGHT: #5cc 3px solid;<br /> BORDER-LEFT: #5cc 3px solid;<br /> padding:10px;<br /> height:200px;<br /> background-color:#fff;<br /> }<br /> .d_foot{<br /> clear:both;<br /> overflow:hidden;<br /> background-color:#5cc;<br /> height:2px;<br /> }<br /> <br /> function $(id){return document.getElementById(id);}<br /> function show(id){<br /> var t = $(id);<br /> t.style.width=document.body.clientWidth;<br /> t.style.height=document.body.clientHeight;<br /> window.onresize=function(){<br /> t.style.width=document.body.clientWidth;<br /> t.style.height=document.body.clientHeight;<br /> }<br /> $(id).style.display="";<br /> }<br /> function cl(id){<br /> $(id).style.display="none";<br /> }<br /> function moveEvent(e,id){<br /> var isIE = (document.all)?true:false;<br /> drag = true;<br /> xx=isIE?event.x:e.pageX;<br /> yy=isIE?event.y:e.pageY;<br /> L = document.getElementById(id).offsetLeft;<br /> T = document.getElementById(id).offsetTop;<br /> document.onmousemove = function(e) {<br /> if (drag) {<br /> x=isIE?event.x:e.pageX; if(x<0)x=0;<br /> y=isIE?event.y:e.pageY; if(y<0)y=0;<br /> document.getElementById(id).style.left = L-xx+x;<br /> document.getElementById(id).style.top = T-yy+y;<br /> }<br /> }<br /> document.onmouseup=function(){<br /> drag = false;<br /> }<br /> }<br /> window.onscroll=function(){<br /> $("back_div").style.width=document.body.scrollWidth;<br /> $("back_div").style.height=document.body.scrollHeight;<br /> }<br /> 点这里弹出圆角效果的div对话框！ 欢迎光临 × 欢迎光临：脚本之家 希望本文所述对大家的javascript程序设计有所帮助。
