js拉动边框改变盒子大小
来源：互联网 发布：安卓php服务器汉化版 编辑：程序博客网 时间：2024/06/11 21:55
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; color: #000; text-decoration: none; } .drag{ width: 300px; height: 300px; border: 1px solid #000; position: absolute; top: 100px; left: 100px; font-size: 14px; box-shadow: 2px 2px 5px gray; } .title{ height: 35px; width: 100%; border-bottom: 1px solid #DDDDDD; } .min{ width: 15px; height: 15px; font-size: 15px; position: absolute; top: 10px; right: 50px; } .max{ width: 15px; height: 15px; font-size: 15px; position: absolute; top: 10px; right: 30px; } .revert{ width: 15px; height: 15px; font-size: 15px; position: absolute; top: 10px; right: 30px; display: none; } .close{ width: 15px; height: 15px; font-size: 15px; position: absolute; top: 10px; right: 10px; } .resizeB{ width: 100%; height: 10px; position: absolute; bottom: 0; cursor: n-resize; } .resizeL{ width: 10px; height: 100%; position: absolute; left: 0; top: 0; cursor: w-resize; } .resizeT{ width: 100%; height: 10px; position: absolute; top: 0; cursor: n-resize; } .resizeR{ width: 10px; height: 100%; position: absolute; right: 0; top: 0; cursor: w-resize; } .resizeLT{ width: 10px; height: 10px; position: absolute; top: 0; left: 0; z-index: 2; cursor: nw-resize; } .resizeLB{ width: 10px; height: 10px; position: absolute; bottom: 0; left: 0; z-index: 2; cursor: ne-resize; } .resizeRT{ width: 10px; height: 10px; position: absolute; top: 0; right: 0; z-index: 2; cursor: ne-resize; } .resizeRB{ width: 10px; height: 10px; position: absolute; bottom: 0; right: 0; z-index: 2; cursor: nw-resize; } .content{ margin: 10px; font-size: 15px; } </style> </head> <body> <div class="drag"> <div class="title"> <div class="tip"> <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="关闭">X</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="resizeRT"></div> <div class="resizeRB"></div> <div class="resizeLB"></div> <div class="content">拖动、最大化、最小化、关闭等效果</div> </div> </body> <script type="text/javascript"> var dragMinWidth=300; var dragMinHeight=300; var oDrag=document.querySelector('.drag'); var oTitle=document.querySelector('.drag .title'); var min=document.querySelector('.min'); var max=document.querySelector('.max'); var revert=document.querySelector('.revert'); var close=document.querySelector('.close'); var resizeL=document.querySelector('.resizeL'); var resizeB=document.querySelector('.resizeB'); var resizeR=document.querySelector('.resizeR'); var resizeT=document.querySelector('.resizeT'); var resizeLT=document.querySelector('.resizeLT'); var resizeLB=document.querySelector('.resizeLB'); var resizeRT=document.querySelector('.resizeRT'); var resizeRB=document.querySelector('.resizeRB'); //拖拉函数 function drag(oDrag,handle){ var disX=disY=0; handle=handle||oDrag; handle.style.cursor='move'; handle.onmousedown=function(e){ e=e||event; e.preventDefault(); disX=e.clientX-oDrag.offsetLeft; disY=e.clientY-oDrag.offsetTop; document.onmousemove=function(e){ e=e||event; var Left=e.clientX-disX; var Top=e.clientY-disY; var maxleft=document.documentElement.offsetWidth-oDrag.offsetWidth; var maxtop=document.documentElement.clientHeight-oDrag.offsetHeight; if (Left<0) { Left=0; }else if (Left>maxleft) { Left=maxleft; }; if (Top<0) { Top=0; }else if (Top>maxtop) { Top=maxtop; }; oDrag.style.left=Left+'px'; oDrag.style.top=Top+'px'; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }; }; //最大化按钮 max.onclick=function(){ var maxwidth=document.documentElement.clientWidth-2; var maxheight=document.documentElement.clientHeight-2; oDrag.style.top=0; oDrag.style.left=0; oDrag.style.width=maxwidth+'px'; oDrag.style.height=maxheight+'px'; this.style.display='none'; revert.style.display='block'; }; //还原按钮 revert.onclick=function(){ var width=300; var height=300; oDrag.style.top='100px'; oDrag.style.left='100px'; oDrag.style.width=width+'px'; oDrag.style.height=height+'px'; this.style.display='none'; max.style.display='block'; }; //最小化按钮和关闭 min.onclick=close.onclick=function(){ oDrag.style.display='none'; }; }; //改变大小函数 function resize(oparent,handle,isleft,istop,lookx,looky){ var disX=disY=0; handle=handle||oDrag; handle.onmousedown=function(e){ e=e||event; e.preventDefault(); disX=e.clientX-this.offsetLeft; disY=e.clientY-this.offsetTop; var iparenttop=oparent.offsetTop; var iparentleft=oparent.offsetLeft; var iparentwidth=oparent.offsetWidth; var iparentheight=oparent.offsetHeight; document.onmousemove=function(e){ e=e||event; var iL=e.clientX-disX; var iT=e.clientY-disY; var maxw=document.documentElement.clientWidth-oparent.offsetLeft-2; var maxh=document.documentElement.clientHeight-oparent.offsetTop-2; var iw= isleft?iparentwidth-iL:handle.offsetWidth+iL; var ih = istop ? iparentheight - iT : handle.offsetHeight + iT; if (isleft) { oparent.style.left=iparentleft+iL+'px'; }; if (istop) { oparent.style.top=iparenttop+iT+'px'; }; if (iw<dragMinWidth) { iw=dragMinWidth }else if (iw>maxw) { iw=maxw; }; if (lookx) { oparent.style.width=iw+'px'; }; if (ih<dragMinHeight) { ih=dragMinHeight; }else if (ih>maxh) { ih=maxh; }; if (looky) { oparent.style.height=ih+'px'; }; if ((isleft && iw==dragMinWidth)||(istop && ih==dragMinHeight)) { document.onmousemove=null; }; return false; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }; }; }; //调用 (function(){ drag(oDrag,oTitle); //四边变大 resize(oDrag,resizeB,false,false,false,true); resize(oDrag,resizeR,false,false,true,false); resize(oDrag,resizeT,false,true,false,true); resize(oDrag,resizeL,true,false,true,false); //四角变大 resize(oDrag,resizeRB,false,false,true,true); resize(oDrag,resizeRT,false,true,true,true); resize(oDrag,resizeLT,true,true,true,true); resize(oDrag,resizeLB,true,false,true,true); })(); </script></html>
0 0
- js拉动边框改变盒子大小
- js 拉动边框改变大小网络版
- 改变div的大小，左右上下可以拉动
- 无边框对话框改变大小
- 无边框对话框改变大小
- 用加速度方式改变盒子的大小
- node-webkit无边框窗口用纯JS实现拖动改变大小
- c# 改变无边框窗体大小 张宇轩
- [转载]无边框对话框改变大小
- c# 无边框 form 改变大小
- 无边框窗体拖动和改变大小
- 边框处拖动鼠标改变div大小
- WinForm改变无边框窗体大小
- 鼠标经过选项，浅色边框变成红色边框，原来的浅色竖线被覆盖；尽量但是不改变原来选项的盒子的大小的方法；如图效果
- JS拖拽(改变物体大小)
- js拉动效果
- wpf改变默认的窗口边框大小,去掉边框,并且可以拖动大小
- 确定窗口边框大小的方法/js
- C 学习一：令牌（Tokens）、关键字
- 新版Solr中的core概念
- Spark Shuffle FetchFailedException异常
- LeetCode 120. Triangle
- Random类
- js拉动边框改变盒子大小
- （四）SMART原则
- Velocity找不到.vm文件的问题
- SDRAM和SRAM的定义与区别
- Linux使用mount挂载Windows共享文件夹
- 【nlp论文阅读】Adversal Neural Machine Translation
- MyEclipse开发Java Web 程序
- linux服务器扩容硬盘
- NGUI下粒子显示顺序注意问题
