<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS拖拽综合应用---改变窗口大小- www.xianstudy.com</title> <style> * { margin:0; padding:0; } div { position:absolute; top:300px; left:300px; width:200px; height:200px; background:#ccc; } #rb { position:absolute; bottom:0; right:0; width:20px; height:20px; background:red; z-index:1; } #r { position:absolute; top:0; right:0; height:100%; width:20px; background:green; } #lb { position:absolute; bottom:0; left:0; width:20px; height:20px; background:red; z-index:1; } #lt { position:absolute; top:0; left:0; width:20px; height:20px; background:red; z-index:1; } #b {position:absolute; bottom:0; left:0; width:100%; height:20px; background:green; } #l {position:absolute; top:0; left:0; height:100%; width:20px; background:green; } </style> <script> window.onload=function (){ var oDiv=document.getElementById('div1'); var aChild=oDiv.children; for (var i=0; i<aChild.length; i++) { resize(aChild[i]); } function resize(obj) { if (obj.id.indexOf('r') != -1) { var nMaxW=document.documentElement.clientWidth-oDiv.offsetLeft; } if (obj.id.indexOf('b') != -1) { var nMaxH=document.documentElement.clientHeight-oDiv.offsetTop; } if (obj.id.indexOf('l') != -1) { var nMaxW=oDiv.offsetLeft+oDiv.offsetWidth; } var nMinW=nMinH=100; obj.onmousedown=function (ev){ var oEvent=ev || event; // R if (obj.id.indexOf('r') != -1) { var oldX=oEvent.clientX; var oldW=oDiv.offsetWidth; } // B if (obj.id.indexOf('b') != -1) { var oldY=oEvent.clientY; var oldH=oDiv.offsetHeight; } // L if (obj.id.indexOf('l') != -1) { var oldW=oDiv.offsetWidth; var oldX=oEvent.clientX; var oldL=oDiv.offsetLeft; } // T if (obj.id.indexOf('t') != -1) { var oldT=oDiv.offsetTop; var oldY=oEvent.clientY; var oldH=oDiv.offsetHeight; } document.onmousemove=function (ev){ var oEvent=ev || event; // R if (obj.id.indexOf('r') != -1) { var newW=oEvent.clientX-oldX+oldW; if (newW > nMaxW) { newW=nMaxW; } else if (newW < nMinW) { newW=nMinW; } oDiv.style.width=newW+'px'; } // B if (obj.id.indexOf('b') != -1) { var newH=oEvent.clientY-oldY+oldH; if (newH > nMaxH) { newH=nMaxH; } else if (newH < nMinH) { newH=nMinH; } oDiv.style.height=newH+'px'; } // L if (obj.id.indexOf('l') != -1) { var newW=oldX-oEvent.clientX+oldW; var newL=oldL-(oldX-oEvent.clientX); if (newW > nMaxW) { newW=nMaxW; } else if (newW < nMinW) { newW=nMinW; } if (newL < 0) { newL=0; } else if (newL > oldW+oldL-nMinW) { newL=oldW-nMinW+oldL; } oDiv.style.width=newW+'px'; oDiv.style.left=newL+'px'; } // T if (obj.id.indexOf('t') != -1) var newH=oldY-oEvent.clientY+oldH; if (newH > oldT+oldH) { newH=oldT+oldH; } else if (newH < nMinH) { newH=nMinH; } var newT=oldT-(oldY-oEvent.clientY); if (newT < 0) { newT=0; } else if (newT > oldT+oldH-nMinH) { newT=oldT+oldH-nMinH; } oDiv.style.height=newH+'px'; oDiv.style.top=newT+'px'; }; document.onmouseup=function (){ document.onmousemove=null; document.onmouseup=null; }; }; } }; </script> </head> <body> <div id="div1"> <span id="lt"></span> <span id="r"></span> <span id="rb"></span> <span id="lb"></span> <span id="b"></span> <span id="l"></span> </div> </body> </html>
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
评论