javascript实现漂亮的拖动层，窗口拖拽特效
javascript实现漂亮的拖动层，窗口拖拽特效
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>窗口拖拽（改变大小/最小化/最大化/还原/关闭）</title>
<styletype="text/css">
body,div,h2{margin:0;padding:0;}
body{background:url(/jscss/demoimg/201205/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:1pxsolid#444;border-radius:5px;box-shadow:01px3px2px#666;}
#drag.title{position:relative;height:27px;margin:5px;}
#drag.titleh2{font-size:14px;height:27px;line-height:24px;border-bottom:1pxsolid#A1B4B0;}
#drag.titlediv{position:absolute;height:19px;top:2px;right:0;}
#drag.titlea,a.open{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(/jscss/demoimg/201205/tool.png)no-repeat;}
a.open{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:00;}
a.open:hover{background-position:0-29px;}
#drag.titlea.min{background-position:-29px0;}
#drag.titlea.min:hover{background-position:-29px-29px;}
#drag.titlea.max{background-position:-60px0;}
#drag.titlea.max:hover{background-position:-60px-29px;}
#drag.titlea.revert{background-position:-149px0;display:none;}
#drag.titlea.revert:hover{background-position:-149px-29px;}
#drag.titlea.close{background-position:-89px0;}
#drag.titlea.close:hover{background-position:-89px-29px;}
#drag.content{overflow:auto;margin:05px;}
#drag.resizeBR{position:absolute;width:14px;height:14px;right:0;bottom:0;overflow:hidden;cursor:nw-resize;background:url(/jscss/demoimg/201205/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>
<scripttype="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>
<divid="drag">
<divclass="title">
<h2>这是一个可以拖动的窗口</h2>
<div>
<aclass="min"href="javascript:;"title="最小化"></a>
<aclass="max"href="javascript:;"title="最大化"></a>
<aclass="revert"href="javascript:;"title="还原"></a>
<aclass="close"href="javascript:;"title="关闭"></a>
</div>
</div>
<divclass="resizeL"></div>
<divclass="resizeT"></div>
<divclass="resizeR"></div>
<divclass="resizeB"></div>
<divclass="resizeLT"></div>
<divclass="resizeTR"></div>
<divclass="resizeBR"></div>
<divclass="resizeLB"></div>
<divclass="content">
①窗口可以拖动；<br/>
②窗口可以通过八个方向改变大小；<br/>
③窗口可以最小化、最大化、还原、关闭；<br/>
④限制窗口最小宽度/高度。
</div>
</div>
</body>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。