jQuery實現(xiàn)右下角可縮放大小的層完整實例

更新時間：2016年06月20日 14:45:17 作者：cherry

這篇文章主要介紹了jQuery實現(xiàn)右下角可縮放大小的層,以完整實例形式分析了jQuery頁面元素及相關樣式屬性操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)右下角可縮放大小的層。分享給大家供大家參考，具體如下：

<!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>

函數(shù)封裝后：

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相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

基于jquery的圖片幻燈展示源碼
基于jquery的圖片幻燈展示源碼，需要的朋友可以參考下
2012-07-07
jQuery編程動畫的基本方法示例詳解
這篇文章主要為大家介紹了jQuery編程動畫基本實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Jquery跳到頁面指定位置的方法
這篇文章主要介紹了Jquery跳到頁面指定位置的方法,需要的朋友可以參考下
2014-05-05
asp.net中oracle 存儲過程（圖文）
存儲過程是在大型數(shù)據(jù)庫系統(tǒng)中，一組為了完成特定功能的sql語句集，經(jīng)過編譯存儲在數(shù)據(jù)庫中，用戶通過指定存儲過程的名字并給出參數(shù)（如果該存儲過程帶有參數(shù)）來執(zhí)行它，下面小編給大家介紹asp.net中oracle存儲過程，需要的朋友可以參考下
2015-08-08
基于jquery animate操作css樣式屬性小結
昨天突然有網(wǎng)友問我animate()方法可以來操作所有css屬性嗎？是的，我告訴他可以的。不過，在此有需要注意點需要大家搞清楚。接下來通過本篇文章給大家介紹基于jquery animate操作css樣式屬性小結，對jquery animate css相關知識感興趣的朋友一起學習吧
2015-11-11
jquery實現(xiàn)全屏滾動
這篇文章主要介紹了jquery實現(xiàn)全屏滾動，針對全屏滾動知識進行詳細闡述，感興趣的小伙伴們可以參考一下
2015-12-12
jQuery+css實現(xiàn)的時鐘效果(兼容各瀏覽器)
這篇文章主要介紹了jQuery+css實現(xiàn)的時鐘效果,使用js的setTimeout方法實時修改頁面元素,實現(xiàn)動態(tài)顯示時鐘的功能.該代碼可兼容各瀏覽器,需要的朋友可以參考下
2016-01-01
jquery 問答知識整理
jquery 問答知識整理，學習jquery的朋友可以參考下。
2010-02-02
jQuery+json實現(xiàn)的簡易Ajax調(diào)用實例
這篇文章主要介紹了jQuery+json實現(xiàn)的簡易Ajax調(diào)用,結合實例形式分析了jQuery基于ajax實現(xiàn)json傳參調(diào)用的技巧,需要的朋友可以參考下
2015-12-12
基于jquery實現(xiàn)控制經(jīng)緯度顯示地圖與衛(wèi)星
下文與大家分享下使用jquery實現(xiàn)控制經(jīng)緯度顯示地圖與衛(wèi)星，感興趣的朋友可以參考下哈，希望對你有所幫助
2013-05-05