首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

Posted in Javascript onOctober 10, 2015

本文实例讲述了JS实现漂亮的窗口拖拽效果。分享给大家供大家参考。具体如下：

这是一款漂亮的JS窗口拖拽效果（改变大小/最小化/最大化/还原/关闭）

特点：

① 窗口可以拖动；
② 窗口可以通过八个方向改变大小；
③ 窗口可以最小化、最大化、还原、关闭；
④ 限制窗口最小宽度/高度。

运行效果截图如下：

JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

在线演示地址如下：

具体代码如下：

<!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程序设计有所帮助。

JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
Vue和React有哪些区别
Sep 12 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 #Javascript
表单验证插件Validation应用的实例讲解
Oct 10 #Javascript
JS实现的车标图片提示效果代码
Oct 10 #Javascript
jqTransform美化表单
Oct 10 #Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 #Javascript
页面内容排序插件jSort使用方法
Oct 10 #Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 #Javascript
证婚词(21) 欢迎词(65) 检讨书(456) 演讲稿(869) 表扬信(62) 道歉信(39) 邀请函(127) 介绍信(57) 思想汇报(404) 心得体会(660)
You might like
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
js创建元素（节点）示例
2014/01/02 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
Python的面向对象编程方式学习笔记
2016/07/12 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
keras打印loss对权重的导数方式
2020/06/10 Python
编码实现字符串转整型的函数
2012/06/02 面试题
垃圾回收的优点和原理
2014/05/16 面试题
大学生演讲稿范文
2014/01/11 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2015年见习期工作总结
2014/12/12 职场文书
优秀团员事迹材料
2014/12/25 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
sql字段解析器的实现示例
2021/06/23 SQL Server