JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
本文实例讲述了JS实现漂亮的窗口拖拽效果。分享给大家供大家参考。具体如下:
这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭)
特点:
① 窗口可以拖动;
② 窗口可以通过八个方向改变大小;
③ 窗口可以最小化、最大化、还原、关闭;
④ 限制窗口最小宽度/高度。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/
具体代码如下:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
<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>
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)的更多相关文章
- Electron 无边框窗口最大化最小化关闭功能
Electron 无边框窗口最大化最小化关闭功能 目的 实现无边框窗口,并添加最大化最小化和关闭功能 前提 了解Electron 主进程和渲染进程的通讯 了解 BrowserWindow相关功能 操作 ...
- js实现本地图片文件拖拽效果
如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- canvas实现鼠标拖拽矩形移动改变大小
项目的一个新需求,动态生成矩形框,鼠标点击拖动改变矩形框的位置,并可以调整大小. 之前做过一个小demo,需求类似,但是在canvas内只有一个矩形框,拖动移动,当时记得是用isPointInPath ...
- Qt 窗口操作函数(置顶、全屏,最大化最小化按钮设置等)
一.窗口置顶 与 取消置顶 void MainWindow::on_windowTopButton_clicked() { if (m_flags == NULL) { m_flags = windo ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
随机推荐
- CUBRID学习笔记 25 数据类型2
---恢复内容开始--- 6枚举类型 语法 <enum_type> : ENUM '(' <char_string_literal_list> ')' <char_str ...
- python_way ,day5 模块,模块3 ,双层装饰器,字符串格式化,生成器,递归,模块倒入,第三方模块倒入,序列化反序列化,日志处理
python_way.day5 1.模块3 time,datetime, json,pickle 2.双层装饰器 3.字符串格式化 4.生成器 5.递归 6.模块倒入 7.第三方模块倒入 8.序列化反 ...
- javascript权威指南笔记--javascript语言核心(二)
1.函数作用域:在函数内声明的所有变量在函数体内始终是可见的.这意味着在变量声明之前甚至已经可用. *“声明提前”:javascript函数里声明的所有变量(但不涉及赋值)都被提前至函数的顶部. fu ...
- Maven聚合与继承
分别为两种不同形式的聚合 相关代码如下: https://github.com/humeng126/account-parent_1 https://github.com/humeng126/acco ...
- c++ primer 的 textquery 例子。
总共3种方法,一种是第四版书上的面向对象的教学方法.一种是实际中应该使用的简洁方法.一种是模板的方法. 1)第四版书中,面向对象的方法,基类,继承,多态 2)自己的更简洁的写法.(前提条件:如果不需要 ...
- bootstrap学习笔记<六>(表单二之按钮)
按钮(补充) (ps:居中元素可以使用<center></center>标签) 块级按钮(ps:按钮占一整行) <button class="btn btn-p ...
- hdu3264Open-air shopping malls(二分)
链接 枚举伞的圆心,最多只有20个,因为必须与某个现有的圆心重合. 然后再二分半径就可以了. #include <iostream> #include<cstdio> #inc ...
- Android应用程序构成
一个Android应用程序一般是由以下4个组件构成的: 活动(Activity) 意图(Intent) 服务(Service) 内容提供器(Content Provider) 这4个组件是构成andr ...
- Virtualbox虚拟机安装CentOS6.5图文详细教程(zhuan)
http://www.2cto.com/os/201407/318477.html ************************************************* 什么是Virtu ...
- JS 的子父级页面调用
window.frames["iframevehquery"].add(); // 父页面调用嵌套子页面的js函数, iframevehquery 为 iframe 的name值, ...