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

zoukankan html css js c++ java

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

转自《JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)》：http://www.jb51.net/article/73157.htm

这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小、最大化、最小化、关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变、还原及关闭等功能的相关实现技巧,需要的朋友可以参考下

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

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

特点：

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/

具体代码如下：

<!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 5fae8f6f96c59ed1;color:#333;}

#drag{position:absolute;top:100px;left:100px;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;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;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;5px;height:100%;cursor:w-resize;}

#drag .resizeR{right:0;}

#drag .resizeT,#drag .resizeB{100%;height:5px;cursor:n-resize;}

#drag .resizeT{top:0;}

#drag .resizeB{bottom:0;}

#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{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>

查看全文

相关阅读:
Java8基础之native方法
 Java基础之static关键字
 Java基础之继承
 Java之equals和hashCode方法
 Java基础之this关键字
 Java基础之super关键字
 Java基础之Serializable接口
 Java之反射学习
 Python3之多线程学习
 Python3之深拷贝和浅拷贝区别

原文地址：https://www.cnblogs.com/limeiky/p/5818474.html