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"
    <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>
  • 相关阅读:
    使用某些 DOCTYPE 时会导致 document.body.scrollTop 失效
    VB.NET 笔记1
    知识管理系统Data Solution研发日记之一 场景设计与需求列出
    知识管理系统Data Solution研发日记之五 网页下载,转换,导入
    折腾了这么多年的.NET开发,也只学会了这么几招 软件开发不是生活的全部,但是好的生活全靠它了
    分享制作精良的知识管理系统 博客园博客备份程序 Site Rebuild
    知识管理系统Data Solution研发日记之四 片段式数据解决方案
    知识管理系统Data Solution研发日记之二 应用程序系列
    知识管理系统Data Solution研发日记之七 源代码与解决方案
    知识管理系统Data Solution研发日记之三 文档解决方案
  • 原文地址:https://www.cnblogs.com/limeiky/p/5818474.html
Copyright © 2011-2022 走看看