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>
以上所述就是本文的全部内容了,希望大家能够喜欢。