窗口可随意拖动效果，带关闭按钮，还能自由拉伸。
<!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=utf-8">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,codesocang.com,sky,www.codesocang.com,站长特效 网" />
<meta name="description" content="www.codesocang.com,源码搜藏网，站长必备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/title_bg_zzjs20101230.gif) repeat-x;border:1px solid #aaaaaa;cursor:move;position:relative;}
.drag_layer .close{width:21px;height:20px;background:url(/img/close_zzjs20101230.gif) no-repeat 0 bottom;position:absolute;top:2px;right:3px;}
.drag_layer .close:hover{background:url(/img/close_zzjs20101230.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/r_zzjs20101230.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;
//欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
var oContent = null;
var oDragBoth = null;
var oDragL = null;
var oDragT = null;
var oDragR = null;
var oDragB = null;
//欢迎来到源码搜藏网，我们的网址是ww..w.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
window.onload = function ()
{
var oBtnClose = null;
var oH2Title = null;
var aDiv = null;
var fnDrag = null;
var i = 0;
oMsgbox = document.getElementById('www_zzjs_net');
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';
}
);
//欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
}*/
);
}
};
//欢迎来到源码搜藏网，我们的网址是www.zzjs.n et，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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';
}
//欢迎来到源码搜藏网，我们的网址是www.zz js.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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';
}
//欢迎来到站长特效.网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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';
}
//欢迎来到源码搜藏网，我们的网址是www.z zjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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';
}
//欢迎来到源码搜藏网，我们的网址是ww w.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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';
}
//欢迎来到站.长特效网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
};
}
//欢迎来到站长特效q网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
}
};
//欢迎来到站长特c效网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
}
};
//欢迎来到站长特x效网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
}; //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.codesocang.com/">源码搜藏网</a>，以质量为核心，以实用为目的，打造一流网页特效站！codesocang.com，站长js特效。<hr>
<!--欢迎来到源码搜藏网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.codesocang.com，zzjs@msn.com,用.net打造靓站-->
<div style="height:2000px;"></div>
<div id="www_zzjs_net" class="drag_layer">
<h2>
<strong title="源码搜藏网 www.codesocang.com 一流网页特效站！">源码搜藏网 www.codesocang.com 一流网页特效站！</strong>
<a href="#" class="close" title="关闭"></a>
</h2>
<div class="content">
<p><a href="http://www.codesocang.com">源码搜藏网</a>，高质量网页特效代码，广告代码，js特效代码网站。以质量为核心，以实用为目的，打造一流网页特效站！</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>