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

2019-11-20 09:39:17

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：jQuery实现的网格线绘制方法

下一篇：需灵活掌握的Bootstrap预定义排版类你精通吗?