简单可拖动的div层

最新推荐文章于 2024-09-09 09:35:48 发布

yy280458609

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量441

点赞数

文章标签： div function javascript float button filter

本文链接：https://blog.csdn.net/yy280458609/article/details/7652275

版权

<html>
<head>
<title>可拖动DIV</title>
   <script language="JavaScript">
   function showProc(){
message_box.style.visibility='visible';
//创建灰色背景层
procbg = document.createElement("div");
procbg.setAttribute("id","mybg");
procbg.style.background = "#000";
procbg.style.width = "20%";
procbg.style.height = "20%";
procbg.style.position = "absolute";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zIndex = "200";
procbg.style.opacity = "0.3";
procbg.style.filter = "Alpha(opacity=30)";
//背景层加入页面
//document.body.appendChild(procbg);
// document.body.style.overflow = "hidden";
}
//拖动
function drag(obj){
     var s = obj.style;
     var b = document.body;
var x = event.clientX + b.scrollLeft - s.pixelLeft;
var y = event.clientY + b.scrollTop - s.pixelTop;

var m = function(){
   if(event.button == 1){
    s.pixelLeft = event.clientX + b.scrollLeft - x;
    s.pixelTop = event.clientY + b.scrollTop - y;
   }else {
    document.detachEvent("onmousemove", m);
   }
}

document.attachEvent("onmousemove", m)

if(!this.z)
   this.z = 999;
s.zIndex = ++this.z;
event.cancelBubble = true;
}

function closeProc(){
message_box.style.visibility='hidden';
procbg.style.visibility = "hidden";
}

</script>
</head>

<div id="message_box" style="position:absolute;
           left:10%;top:10%;width:30%;height:30%;
           filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);
           z-index:1000;
           visibility:hidden">
   <div id= "message" style="border:#036 solid; border-width:1 1 3 1;
         width:50%; height:50%;
         background:#fff; color:#036; font-size:12px; line-height:150%;">
    
    <div style="background:#666; height:5%;
       font-family:Verdana, Arial, Helvetica, sans-serif;
       font-size:12px; padding:3 5 0 5; color:#fff"
      οnmοusedοwn="drag(message_box);return false">
     <span style="display:inline;width:150px;position:absolute;font-size:200%">标题</span>
     <span onClick="closeProc();" style="float:right;display:inline;cursor:hand;font-size:200%" mce_style="float:right;display:inline;cursor:hand;font-size:200%">×</span>
    </div> 具体内容自己定义</div>
</div>
</body>
</html>