jQuery实现右下角可缩放大小的层完整实例

时间:2020-05-15 cherry 人气:0

本文实例讲述了jQuery实现右下角可缩放大小的层。分享给大家供大家参考，具体如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>大小可缩放层测试</title>
    <script type = "text/javascript" src="jquery-1.7.2.js"></script>
    <style type = "text/css">
      #fa{
        border:1px solid blue;
        overflow:auto;
        width:400px;
        height:400px;
      }
      #main{
        margin:0;
        padding:0;
        width:300px;
        height:280px;
        border:1px solid red;
      }
    </style>
    <script type = "text/javascript">
      $(function(){
        var div = getObj("main");
        div.onmousemove = function(e){
          var e = e || window.event;
          var posx = e.clientX;
          var posy = e.clientY;
          var l = div.offsetLeft;
          var t = div.offsetTop;
          var h = div.clientHeight;
          var w = div.clientWidth;
          var ol = l+w-10;
          var or = l+w+10;
          var ot = t+h-10;
          var ob = t+h+10;
          this.style.cursor = "";
          if(posx>ol && posx<or && posy >ot && posy<ob){
            div.style.cursor = "nw-resize";
          }
        }
        div.onmousedown = function(e){
          var e = e || window.event;
          var initX = e.clientX;
          var initY = e.clientY;
          var l = div.offsetLeft;
          var t = div.offsetTop;
          var h = div.clientHeight;
          var w = div.clientWidth;
          var ol = l+w-10;
          var or = l+w+10;
          var ot = t+h-10;
          var ob = t+h+10;
          if(initX>ol && initX<or && initY >ot && initY<ob){
            document.onmousemove = function(evt){
              var e = evt || window.event;
              var currX = e.clientX;
              var currY = e.clientY;
              div.style.width = w + (currX - initX)+"px";
              div.style.height = h+(currY-initY)+"px";
            }
            document.onmouseup = function(){
              document.onmousemove = null;
              document.onmouseup = null;
            }
          }
        }
      });
      function getObj(id){
        return document.getElementById(id);
      }
    </script>
  </head>
  <body>
    <div id = "fa">
      <div id = "main"></div>
    </div>
  </body>
</html>

函数封装后：

function resize(div){
  div.mousemove(function(e){
    var e = e || window.event;
    var posx = e.clientX;
    var posy = e.clientY;
    var l = div.offset().left;
    var t = div.offset().top;
    var h = div.height();
    var w = div.width();
    var ol = l+w-10;
    var or = l+w+10;
    var ot = t+h-10;
    var ob = t+h+10;
    $(this).css("cursor","");
    if(posx>ol && posx<or && posy >ot && posy<ob){
      $(this).css("cursor","nw-resize");
    }
  });
  div.mousedown(function(e){
    var e = e || window.event;
    var posx = e.clientX;
    var posy = e.clientY;
    var l = div.offset().left;
    var t = div.offset().top;
    var h = div.height();
    var w = div.width();
    var ol = l+w-10;
    var or = l+w+10;
    var ot = t+h-10;
    var ob = t+h+10;
    if(posx>=ol && posx<=or && posy >=ot && posy<=ob){
      document.onmousemove = function(e){
        var e = e || window.event;
        var currX = e.clientX;
        var currY = e.clientY;
        div.width(w + (currX - posx));
        div.height(h+(currY-posy));
      }
      $(document).mouseup(function(){
        document.onmousemove = null;
      });
    }
  });
}

希望本文所述对大家jQuery程序设计有所帮助。

加载全部内容