js实现窗口可随意拖动效果，这个窗口带有关闭按钮，还能用鼠标压住对角进行自由拉伸放大显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>带关闭功能的可拖动窗口_武鸣人</title>
<style type="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
body{background:#eee;}
.drag_layer{width:450px;height:270px;border:1px solid #aaaaaa;padding:3px;position:absolute;top:0px;left:0px;background:#fff;overflow:hidden;}
.drag_layer h2{height:25px;line-height:25px;padding-left:10px;font-size:14px;color:#333;background:url(/img/20240410_www_wuming_ren_4.gif) repeat-x;border:1px solid #aaaaaa;cursor:move;position:relative;}
.drag_layer .close{width:21px;height:20px;background:url(/img/20240410_www_wuming_ren_5.gif) no-repeat 0 bottom;position:absolute;top:2px;right:3px;}
.drag_layer .close:hover{background:url(/img/20240410_www_wuming_ren_5.gif) no-repeat 0 0;}
.drag_layer .content{padding:10px;overflow:auto;}
.drag_layer .content p{font-size:12px;line-height:18px;color:#666;text-indent:28px;padding-bottom:10px;font-family:arial;}
.drag{width:14px;height:14px;overflow:hidden;background:url(/img/20240410_www_wuming_ren_6.gif) no-repeat 1px 1px;cursor:nw-resize;position:absolute;top:262px;right:0;z-index:2;}
.bar_t{width:410px;height:4px;position:absolute;top:-2px;left:-2px;z-index:1;cursor:n-resize;overflow:hidden;}
.bar_b{width:410px;height:4px;position:absolute;bottom:-2px;left:-2px;z-index:1;cursor:n-resize;overflow:hidden;}
.bar_r{width:4px;height:110px;position:absolute;right:-2px;top:-2px;z-index:1;cursor:e-resize;}
.bar_l{width:4px;height:110px;position:absolute;left:-2px;top:-2px;z-index:1;cursor:e-resize;}
</style>
<script type="text/javascript">
var oMsgbox=null;
var g_orgTop=0;
var g_orgHeight=0;
var g_orgLeft=0;
var g_orgWidth=0;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var oContent=null;
var oDragBoth=null;
var oDragL=null;
var oDragT=null;
var oDragR=null;
var oDragB=null;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
window.onload=function ()
{
var oBtnClose=null;
var oH2Title=null;
var aDiv=null;
var fnDrag=null;
var i=0;
oMsgbox=document.getElementById('www_wuming_ren');
oBtnClose=oMsgbox.getElementsByTagName('a')[0];
oH2Title=oMsgbox.getElementsByTagName('h2')[0];
aDiv=oMsgbox.getElementsByTagName('div');
oBtnClose.onmousedown=function ()
{
oMsgbox.style.display='none';
};
oMsgbox.style.left=(document.body.scrollLeft||document.documentElement.scrollLeft)+(document.documentElement.clientWidth-oMsgbox.offsetWidth)/2+'px';
oMsgbox.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+(document.documentElement.clientHeight-oMsgbox.offsetHeight)/2+'px';
new PerfectDraging
(
oH2Title,
function ()
{
return {x:oMsgbox.offsetLeft, y:oMsgbox.offsetTop};
},
function (x, y)
{
var iSTop=document.body.scrollTop || document.documentElement.scrollTop;
if(x<0)
{
x=0;
}
else if(x+oMsgbox.offsetWidth>document.documentElement.clientWidth)
{
x=document.body.clientWidth-oMsgbox.offsetWidth;
}
if(y<iSTop)
{
y=iSTop;
}
else if(y+oMsgbox.offsetHeight>document.documentElement.clientHeight+iSTop)
{
y=document.documentElement.clientHeight-oMsgbox.offsetHeight+iSTop;
}
oMsgbox.style.left=x+'px';
oMsgbox.style.top=y+'px';
}
);
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
for(i=0;i<aDiv.length;i++)
{
fnDrag=null;
switch(aDiv[i].className)
{
case 'drag':
fnDrag=doBothDrag;
oDragBoth=aDiv[i];
break;
case 'bar_t':
fnDrag=doTDrag;
oDragT=aDiv[i];
break;
case 'bar_r':
fnDrag=doRDrag;
oDragR=aDiv[i];
break;
case 'bar_b':
fnDrag=doBDrag;
oDragB=aDiv[i];
break;
case 'bar_l':
fnDrag=doLDrag;
oDragL=aDiv[i];
break;
case 'content':
oContent=aDiv[i];
break;
}
if(!fnDrag)
{
continue;
}
new PerfectDraging
(
aDiv[i],
function ()
{
g_orgTop=oMsgbox.offsetTop;
g_orgHeight=oMsgbox.offsetHeight;
g_orgLeft=oMsgbox.offsetLeft;
g_orgWidth=oMsgbox.offsetWidth;
return {x:oMsgbox.offsetWidth, y:oMsgbox.offsetHeight};
},
fnDrag
/*function (x, y)
{
fnDrag(x, y);
}*/
);
}
};
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function doBothDrag(x, y)
{
if(x<110)
{
x=110;
}
oMsgbox.style.width=x-8+'px';
oDragT.style.width=x+'px';
oDragB.style.width=x+'px';
if(y<35)
{
y=35;
}
oMsgbox.style.height=y-8+'px';
oDragL.style.height=y+'px';
oDragR.style.height=y+'px';
oDragBoth.style.top=y-16+'px';
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function doTDrag(x, y)
{
var h=2*g_orgHeight-y;
if(h<35)
{
h=35;
}
oMsgbox.style.top=g_orgTop+g_orgHeight-h+'px';
oMsgbox.style.height=h-8+'px';
oDragL.style.height=h+2+'px';
oDragR.style.height=h+2+'px';
oDragBoth.style.top=h-16+'px';
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function doRDrag(x, y)
{
if(x<110)
{
x=110;
}
oMsgbox.style.width=x-8+'px';
oDragT.style.width=x+2+'px';
oDragB.style.width=x+2+'px';
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function doBDrag(x, y)
{
if(y<35)
{
y=35;
}
oMsgbox.style.height=y-8+'px';
oDragL.style.height=y+2+'px';
oDragR.style.height=y+2+'px';
oDragBoth.style.top=y-16+'px';
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function doLDrag(x, y)
{
var w=2*g_orgWidth-x;
if(w<110)
{
w=110;
}
oMsgbox.style.left=g_orgLeft+g_orgWidth-w+'px';
oMsgbox.style.width=w-8+'px';
oDragT.style.width=w+2+'px';
oDragB.style.width=w+2+'px';
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function PerfectDraging(oElement, fnGetPos, fnOnDrag)
{
var obj=this;
this.oElement=oElement;
this.fnGetPos=fnGetPos;
this.fnOnDrag=fnOnDrag;
this.__oStartOffset__={x:0, y:0};
this.fnOnMouseUp=function (ev)
{
obj.stopDrag(window.event || ev);
};
this.fnOnMouseMove=function (ev)
{
obj.doDrag(window.event || ev);
};
this.oElement.onmousedown=function (ev)
{
obj.startDrag(window.event || ev);
};
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
PerfectDraging.prototype.startDrag=function (oEvent)
{
var oPos=this.fnGetPos();
//var x=oEvent.pageX || oEvent.x;
//var y=oEvent.pageY || oEvent.y;
var x=oEvent.clientX;
var y=oEvent.clientY;
this.__oStartOffset__.x=x-oPos.x;
this.__oStartOffset__.y=y-oPos.y;
if(this.oElement.setCapture)
{
this.oElement.setCapture();
this.oElement.onmouseup=this.fnOnMouseUp;
this.oElement.onmousemove=this.fnOnMouseMove;
}
else
{
document.addEventListener("mouseup", this.fnOnMouseUp, true);
document.addEventListener("mousemove", this.fnOnMouseMove, true);
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
};
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
PerfectDraging.prototype.stopDrag=function (oEvent)
{
if(this.oElement.releaseCapture)
{
this.oElement.releaseCapture();
this.oElement.onmouseup=null;
this.oElement.onmousemove=null;
}
else
{
document.removeEventListener("mouseup", this.fnOnMouseUp, true);
document.removeEventListener("mousemove", this.fnOnMouseMove, true);
window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP);
}
};
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
PerfectDraging.prototype.doDrag=function (oEvent)
{
//var x=oEvent.pageX || oEvent.x;
//var y=oEvent.pageY || oEvent.y;
var x=oEvent.clientX;
var y=oEvent.clientY;
this.fnOnDrag(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y);
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div style="height:2000px;"></div>
<div id="www_wuming_ren" class="drag_layer">
<h2>
<strong title="武鸣人 www.wuming.ren ！各种信息免费发布">武鸣人 www.wuming.ren ！各种信息免费发布！</strong>
<a href="#" class="close" title="关闭"></a>
</h2>
<div class="content">
<p><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</p>
</div>
<div class="drag"></div>
<div class="bar_t"></div>
<div class="bar_r"></div>
<div class="bar_b"></div>
<div class="bar_l"></div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处