jQuery实现右下角可缩放巨细的层完备实例

无极源码站使用技巧

2017-05-25

本文实例报告了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;
      });
    }
  });
}

加入收藏打赏

感谢您的支持，我会继续努力的!

打开微信扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

1. 本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！如有侵权请邮件联系客服！
2. 本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
4. 如果您也有好的资源或教程，您可以投稿发布，成功分享后有积分奖励和额外收入！

无极源码之家 > 建站教程 > 使用技巧 jQuery实现右下角可缩放巨细的层完备实例 https://wjymz.cn/Teach/712.html