首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

弹出掩饰拖动层,不穿过浏览器边缘,兼容IE,FF

2012-07-27 
弹出遮盖拖动层,不穿过浏览器边缘,兼容IE,FFstyle#main {width:250pxheigth:300pxposition:absolutez

弹出遮盖拖动层,不穿过浏览器边缘,兼容IE,FF

<style>#main {width:250px;heigth:300px;position:absolute;z-index:10;border:1px solid #d6d6d6;display:none;}#main .T {width:250px;height:auto;background:green;}#main .T .T_1 {float:left;width:232px;line-height:20px;cursor:move;color:#FFF;font-weight:bold;font-family:verdana;font-size:12px;}#main .T .T_2 {float:left;width:18px;line-height:20px;background:blue;color:#FFF;font-weight:bold;font-family:verdana;font-size:9pt;text-align:center;cursor:pointer;}#main .content {width:250px;height:100px;background:#fff;}</style><script>function $(id){return document.getElementById(id);}function abc(){ $("main").style.display="inline"; $("main").style.top = (document.body.clientHeight - $("main").offsetHeight)/2+"px"; $("main").style.left = (document.body.clientWidth - $("main").offsetWidth)/2+"px"; $("main").onmousedown=Function("Drag(this)"); //拖动层 //背景层 var shield=document.createElement("div"); var W=document.body.clientWidth; var H=document.body.clientHeight; shield.id="shield"; shield.style.cssText="position:absolute;z-index:1;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;"; document.body.appendChild(shield);}function hidden(){if($("main")){$("main").style.display="none";}if($("shield")){document.body.removeChild($("shield"));}}function Drag(str){var e=window.event || arguments.callee.caller.arguments[0];var deltaX=e.clientX-parseInt(str.offsetLeft);var deltaY=e.clientY-parseInt(str.offsetTop);var deltaH=document.body.clientHeight;var deltaW=document.body.clientWidth;var drag=true;str.onmousemove=function(ev){ev=ev?ev:window.event;if(drag){ var Y=ev.clientY-deltaY; var X=ev.clientX-deltaX; var H=deltaH-str.offsetHeight; var W=deltaW-str.offsetWidth; if(Y>0 || X>0){ if(Y>=H){str.style.top=H+"px";}else{str.style.top=Y+"px";} if(X>=W){str.style.left=W+"px";}else{str.style.left=X+"px";} } if(Y<=0){str.style.top=0;} if(X<=0){str.style.left=0;} str.setCapture();}}str.onmouseup=function(){drag=false;str.releaseCapture();}}</script><button onclick="abc()">弹层</button><div id="main"><div onmousedown="Drag(this.parentNode.parentNode)">鼠标放这里拖动</div><div onclick="hidden()">Χ</div></div><div class="content"></div></div>?

热点排行