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

前端技术 2023/09/06 JavaScript

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

本文地址：https://www.stayed.cn/item/16233

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案