首页
所有分类
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 相关文章推荐
JavaScript中Math对象使用说明
Jan 16 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
js调试系列 初识控制台
Jun 18 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
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
有序排列(1) 曝光融合(1) key(1) pycryto(1) 数据加密(1) 公共键(1) 连接器(1) kafka(2) shell脚本(1) HDR(1)
You might like
如何正确理解PHP的错误信息
2006/10/09 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
MSN消息提示类
2006/09/05 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JS中表单的使用小结
2014/01/11 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
美国奢侈品购物平台：Orchard Mile
2018/05/02 全球购物
会计电算化专业自荐信
2014/03/15 职场文书
初中学生评语大全
2014/04/24 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
雷锋之歌观后感
2015/06/10 职场文书
2016年十一促销广告语
2016/01/28 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
微信小程序实现轮播图指示器
2022/06/25 Javascript