js 拉动边框改变大小网络版
来源：互联网 发布：nba2kol戴维斯值数据 编辑：程序博客网 时间：2024/05/19 19:40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/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 +-------------------------- */var get = { byId: function(id) { return typeof id === "string" ? document.getElementById(id) : id }, byClass: function(sClass, oParent) { var aClass = []; var reClass = new RegExp("(^| )" + sClass + "( |$)"); var aElem = this.byTagName("*", oParent); for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]); return aClass }, byTagName: function(elem, obj) { return (obj || document).getElementsByTagName(elem) }};var dragMinWidth = 250;var dragMinHeight = 124;/*-------------------------- + 拖拽函数 +-------------------------- */function drag(oDrag, handle){ var disX = dixY = 0; var oMin = get.byClass("min", oDrag)[0]; var oMax = get.byClass("max", oDrag)[0]; var oRevert = get.byClass("revert", oDrag)[0]; var oClose = get.byClass("close", oDrag)[0]; handle = handle || oDrag; handle.style.cursor = "move"; handle.onmousedown = function (event) { var event = event || window.event; disX = event.clientX - oDrag.offsetLeft; disY = event.clientY - oDrag.offsetTop; document.onmousemove = function (event) { var event = event || window.event; var iL = event.clientX - disX; var iT = event.clientY - disY; var maxL = document.documentElement.clientWidth - oDrag.offsetWidth; var maxT = 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"; return false }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; this.releaseCapture && this.releaseCapture() }; this.setCapture && this.setCapture(); return false }; //最大化按钮 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"; var oA = 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 };}/*-------------------------- + 改变大小函数 +-------------------------- */function resize(oParent, handle, isLeft, isTop, lockX, lockY){ handle.onmousedown = function (event) { var event = event || window.event; var disX = event.clientX - handle.offsetLeft; var disY = event.clientY - handle.offsetTop; var iParentTop = oParent.offsetTop; var iParentLeft = oParent.offsetLeft; var iParentWidth = oParent.offsetWidth; var iParentHeight = oParent.offsetHeight; document.onmousemove = function (event) { var event = event || window.event; var iL = event.clientX - disX; var iT = event.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; 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; return false; }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; return false; }};window.onload = window.onresize = function (){ var oDrag = document.getElementById("drag"); var oTitle = get.byClass("title", oDrag)[0]; var oL = get.byClass("resizeL", oDrag)[0]; var oT = get.byClass("resizeT", oDrag)[0]; var oR = get.byClass("resizeR", oDrag)[0]; var oB = get.byClass("resizeB", oDrag)[0]; var oLT = get.byClass("resizeLT", oDrag)[0]; var oTR = get.byClass("resizeTR", oDrag)[0]; var oBR = get.byClass("resizeBR", oDrag)[0]; var oLB = 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" style="background: red;"></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>
0 0
- js 拉动边框改变大小网络版
- js拉动边框改变盒子大小
- 改变div的大小，左右上下可以拉动
- 无边框对话框改变大小
- 无边框对话框改变大小
- node-webkit无边框窗口用纯JS实现拖动改变大小
- c# 改变无边框窗体大小 张宇轩
- [转载]无边框对话框改变大小
- c# 无边框 form 改变大小
- 无边框窗体拖动和改变大小
- 边框处拖动鼠标改变div大小
- WinForm改变无边框窗体大小
- JS拖拽(改变物体大小)
- js拉动效果
- wpf改变默认的窗口边框大小,去掉边框,并且可以拖动大小
- 确定窗口边框大小的方法/js
- 改变程序显示模式（获取窗口大小、状态栏大小、标题栏大小、边框大小）
- 去掉窗体的边框，并且禁止拖动改变窗体大小
- 用户需求不等于产品需求
- System类及常用方法
- 从左到右对字符串中每个字符删除其后所有相同的字符，只留下第一次出现的那一个。例如，若字符串为”cocoon”，删除重复出现的字符后，其结果是字符串”con”。
- NumPy的详细教程
- 不得不知的jQuery要点
- js 拉动边框改变大小网络版
- 解决SourceTree合并代码时，发生冲突的问题以及第一次使用sourceTree时.ignore的配置
- (4)
- Jmeter的几个测试重要指标
- spring 直接使用ProxyFactoryBean 实现AOP 流程小结
- ButterKnife使用心得
- 自定义Dialog提示框高仿QQ浏览器版本更新提示框
- [leetCode]11.Container With Most Water
- 安装subulime插件
