首页
所有分类
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编程起步（第五课）
Jan 10 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
详解JavaScript基于面向对象之创建对象（1）
Dec 10 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
javascript实现倒计时关闭广告
Feb 09 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
TaiShan(1) 字段分割(1) REGEXP(1) RecyclerView(1) 九宫格(5) queue(1) Hadoop(1) 内存池(1) 控制流(1) Simhash(1)
You might like
php防注
2007/01/15 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
js form表单input框限制20个字符，10个汉字代码实例
2019/04/12 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
python中lambda与def用法对比实例分析
2015/04/30 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python tkinter canvas使用实例
2019/11/04 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
详解Python模块化编程与装饰器
2021/01/16 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
英国第一职业高尔夫商店：Clickgolf.co.uk
2020/11/18 全球购物
工作室成员个人发展规划范文
2014/01/24 职场文书
会计岗位描述
2014/02/22 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
社会实践活动报告
2015/02/05 职场文书
会计求职自荐信范文
2015/03/04 职场文书
学校重阳节活动总结
2015/03/24 职场文书
让生命充满爱观后感
2015/06/08 职场文书
2015年度女工工作总结
2015/10/22 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python