转自《JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)》：/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小、最大化、最小化、关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变、还原及关闭等功能的相关实现技巧,需要的朋友可以参考下
本文实例讲述了JS实现漂亮的窗口拖拽效果。分享给大家供大家参考。具体如下：
这是一款漂亮的JS窗口拖拽效果（改变大小/最小化/最大化/还原/关闭）
特点：
① 窗口可以拖动；
② 窗口可以通过八个方向改变大小；
③ 窗口可以最小化、最大化、还原、关闭；
④ 限制窗口最小宽度/高度。
运行效果截图如下：
在线演示地址如下：
/js//js-win-drug-cha-close-demo/
具体代码如下：
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>窗口拖拽（改变大小/最小化/最大化/还原/关闭）</title><style type="text/css">body,div,h2{margin:0;padding:0;}body{background:url(images/bg.jpg);font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:#333;}#drag{position:absolute;top:100px;left:100px;width:300px;height:160px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;}#drag .title{position:relative;height:27px;margin:5px;}#drag .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}#drag .title div{position:absolute;height:19px;top:2px;right:0;}#drag .title a,a.open{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(images/tool.png) no-repeat;}a.open{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:0 0;}a.open:hover{background-position:0 -29px;}#drag .title a.min{background-position:-29px 0;}#drag .title a.min:hover{background-position:-29px -29px;}#drag .title a.max{background-position:-60px 0;}#drag .title a.max:hover{background-position:-60px -29px;}#drag .title a.revert{background-position:-149px 0;display:none;}#drag .title a.revert:hover{background-position:-149px -29px;}#drag .title a.close{background-position:-89px 0;}#drag .title a.close:hover{background-position:-89px -29px;}#drag .content{overflow:auto;margin:0 5px;}#drag .resizeBR{position:absolute;width:14px;height:14px;right:0;bottom:0;overflow:hidden;cursor:nw-resize;background:url(images/resize.png) no-repeat;}#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{position:absolute;background:#000;overflow:hidden;opacity:0;filter:alpha(opacity=0);}#drag .resizeL,#drag .resizeR{top:0;width:5px;height:100%;cursor:w-resize;}#drag .resizeR{right:0;}#drag .resizeT,#drag .resizeB{width:100%;height:5px;cursor:n-resize;}#drag .resizeT{top:0;}#drag .resizeB{bottom:0;}#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{width:8px;height:8px;background:#FF0;}#drag .resizeLT{top:0;left:0;cursor:nw-resize;}#drag .resizeTR{top:0;right:0;cursor:ne-resize;}#drag .resizeLB{left:0;bottom:0;cursor:ne-resize;}</style><script type="text/javascript">/*-------------------------- +获取id, class, tagName+-------------------------- */varget = {byId:function(id) {returntypeofid ==="string"? document.getElementById(id) : id},byClass:function(sClass, oParent) {varaClass = [];varreClass =newRegExp("(^| )"+ sClass +"( |$)");varaElem =this.byTagName("*", oParent);for(vari = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);returnaClass},byTagName:function(elem, obj) {return(obj || document).getElementsByTagName(elem)}};vardragMinWidth = 250;vardragMinHeight = 124;/*-------------------------- +拖拽函数+-------------------------- */functiondrag(oDrag, handle){vardisX = dixY = 0;varoMin = get.byClass("min", oDrag)[0];varoMax = get.byClass("max", oDrag)[0];varoRevert = get.byClass("revert", oDrag)[0];varoClose = get.byClass("close", oDrag)[0];handle = handle || oDrag;handle.style.cursor ="move";handle.onmousedown =function(event){varevent = event || window.event;disX = event.clientX - oDrag.offsetLeft;disY = event.clientY - oDrag.offsetTop;document.onmousemove =function(event){varevent = event || window.event;variL = event.clientX - disX;variT = event.clientY - disY;varmaxL = document.documentElement.clientWidth - oDrag.offsetWidth;varmaxT = document.documentElement.clientHeight - oDrag.offsetHeight;iL <= 0 && (iL = 0);iT <= 0 && (iT = 0);iL >= maxL && (iL = maxL);iT >= maxT && (iT = maxT);oDrag.style.left = iL +"px";oDrag.style.top = iT +"px";returnfalse};document.onmouseup =function(){document.onmousemove =null;document.onmouseup =null;this.releaseCapture &&this.releaseCapture()};this.setCapture &&this.setCapture();returnfalse};//最大化按钮oMax.onclick =function(){oDrag.style.top = oDrag.style.left = 0;oDrag.style.width = document.documentElement.clientWidth - 2 +"px";oDrag.style.height = document.documentElement.clientHeight - 2 +"px";this.style.display ="none";oRevert.style.display ="block";};//还原按钮oRevert.onclick =function(){oDrag.style.width = dragMinWidth +"px";oDrag.style.height = dragMinHeight +"px";oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 +"px";oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 +"px";this.style.display ="none";oMax.style.display ="block";};//最小化按钮oMin.onclick = oClose.onclick =function(){oDrag.style.display ="none";varoA = document.createElement("a");oA.className ="open";oA.href ="javascript:;";oA.title ="还原";document.body.appendChild(oA);oA.onclick =function(){oDrag.style.display ="block";document.body.removeChild(this);this.onclick =null;};};//阻止冒泡oMin.onmousedown = oMax.onmousedown = oClose.onmousedown =function(event){this.onfocus =function() {this.blur()};(event || window.event).cancelBubble =true};}/*-------------------------- +改变大小函数+-------------------------- */functionresize(oParent, handle, isLeft, isTop, lockX, lockY){handle.onmousedown =function(event){varevent = event || window.event;vardisX = event.clientX - handle.offsetLeft;vardisY = event.clientY - handle.offsetTop;variParentTop = oParent.offsetTop;variParentLeft = oParent.offsetLeft;variParentWidth = oParent.offsetWidth;variParentHeight = oParent.offsetHeight;document.onmousemove =function(event){varevent = event || window.event;variL = event.clientX - disX;variT = event.clientY - disY;varmaxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;varmaxH = document.documentElement.clientHeight - oParent.offsetTop - 2;variW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;variH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;isLeft && (oParent.style.left = iParentLeft + iL +"px");isTop && (oParent.style.top = iParentTop + iT +"px");iW < dragMinWidth && (iW = dragMinWidth);iW > maxW && (iW = maxW);lockX || (oParent.style.width = iW +"px");iH < dragMinHeight && (iH = dragMinHeight);iH > maxH && (iH = maxH);lockY || (oParent.style.height = iH +"px");if((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove =null;returnfalse;};document.onmouseup =function(){document.onmousemove =null;document.onmouseup =null;};returnfalse;}};window.onload = window.onresize =function(){varoDrag = document.getElementById("drag");varoTitle = get.byClass("title", oDrag)[0];varoL = get.byClass("resizeL", oDrag)[0];varoT = get.byClass("resizeT", oDrag)[0];varoR = get.byClass("resizeR", oDrag)[0];varoB = get.byClass("resizeB", oDrag)[0];varoLT = get.byClass("resizeLT", oDrag)[0];varoTR = get.byClass("resizeTR", oDrag)[0];varoBR = get.byClass("resizeBR", oDrag)[0];varoLB = get.byClass("resizeLB", oDrag)[0];drag(oDrag, oTitle);//四角resize(oDrag, oLT,true,true,false,false);resize(oDrag, oTR,false,true,false,false);resize(oDrag, oBR,false,false,false,false);resize(oDrag, oLB,true,false,false,false);//四边resize(oDrag, oL,true,false,false,true);resize(oDrag, oT,false,true,true,false);resize(oDrag, oR,false,false,false,true);resize(oDrag, oB,false,false,true,false);oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 +"px";oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 +"px";}</script></head><body><div id="drag"><div class="title"><h2>这是一个可以拖动的窗口</h2><div><a class="min"href="javascript:;"title="最小化"></a><a class="max"href="javascript:;"title="最大化"></a><a class="revert"href="javascript:;"title="还原"></a><a class="close"href="javascript:;"title="关闭"></a></div></div><div class="resizeL"></div><div class="resizeT"></div><div class="resizeR"></div><div class="resizeB"></div><div class="resizeLT"></div><div class="resizeTR"></div><div class="resizeBR"></div><div class="resizeLB"></div><div class="content">① 窗口可以拖动；<br />② 窗口可以通过八个方向改变大小；<br />③ 窗口可以最小化、最大化、还原、关闭；<br />④ 限制窗口最小宽度/高度。</div></div></body></html>
