JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
本文实例讲述了JS实现漂亮的窗口拖拽效果。分享给大家供大家参考。具体如下:
这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭)
特点:
① 窗口可以拖动;
② 窗口可以通过八个方向改变大小;
③ 窗口可以最小化、最大化、还原、关闭;
④ 限制窗口最小宽度/高度。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/
具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 | <!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" ></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> |
希望本文所述对大家的JavaScript程序设计有所帮助。
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
今天在写页面时用到了ymPrompt的win方法来弹出一个窗口。由于要用到获取子窗口返回来的值判断是否刷新父窗口,在ymPrompt的组件Demo中一直没有找到合适的方法实现2010-06-06通过Javascript将数据导出到外部Excel文档的函数代码
通过Javascript将数据导出到外部Excel文档的函数代码,需要的朋友可以参考下2012-06-06屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键
js 防止刷新网页、禁止后退,右键等操作的代码2010-03-03
最新评论