首页
所有分类
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 相关文章推荐
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
Vue 3.0中jsx语法的使用
Nov 13 Javascript
原生js 实现表单验证功能
Feb 08 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
JavaScript原型链中函数和对象的理解
Jun 16 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
默认端口(3) http(6) 生成缩略图(1) 前后端分离(1) 负载均衡(6) shell(3) reload(1) 防盗链(1) 反向代理(2) 动静分离(1)
You might like
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
理解PHP中的stdClass类
2014/04/18 PHP
php实现微信扫码支付
2017/03/26 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
详解Python中is和==的区别
2019/03/21 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
python logging模块的使用总结
2019/07/09 Python
python 进程的几种创建方式详解
2019/08/29 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
美国电视购物HSN官网：HSN
2016/09/07 全球购物
大学新生欢迎词
2014/01/10 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
法律进企业活动方案
2014/03/04 职场文书
股权转让意向书
2014/04/01 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
售后服务质量承诺书
2015/04/29 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
使用javascript解析二维码的三种方式
2021/11/11 Javascript