看着jquery的大小收缩，自己也尝试写了一个，其实就是增加了三个div来控制大小。

jquery调整大小(resizable)_第1张图片效果图

   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <html> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    5. 
    
    
    
    
  5. <title>resizabletitle> 
    6. 
    
    
    
    
  6. <style type="text/css"> 
    7. 
    
    
    
    
  7. body{    
    8. 
    
    
    
    
  8.   -moz-user-focus:ignore;    
    9. 
    
    
    
    
  9.   -moz-user-input:disabled;    
    10. 
    
    
    
    
  10.   -moz-user-select:none;    
    11. 
    
    
    
    
  11. }      
    12. 
    
    
    
    
  12. .ui-resizable-bd{ 
    13. 
    
    
    
    
  13.     background:none; 
    14. 
    
    
    
    
  14.     position: absolute; 
    15. 
    
    
    
    
  15.     z-index: 1000; 
    16. 
    
    
    
    
  16. } 
    17. 
    
    
    
    
  17. .ui-resizable-bd-east{ 
    18. 
    
    
    
    
  18.     cursor: e-resize; 
    19. 
    
    
    
    
  19. } 
    20. 
    
    
    
    
  20. .ui-resizable-bd-south{ 
    21. 
    
    
    
    
  21.     cursor: s-resize; 
    22. 
    
    
    
    
  22. } 
    23. 
    
    
    
    
  23. .ui-resizable-bd-corner{ 
    24. 
    
    
    
    
  24.     width:16px; 
    25. 
    
    
    
    
  25.     height:16px; 
    26. 
    
    
    
    
  26.     cursor: nw-resize; 
    27. 
    
    
    
    
  27. /*  右下角小图标 */ 
    28. 
    
    
    
    
  28.     background: url(p_w_picpaths/resizable.JPG) no-repeat;  
    29. 
    
    
    
    
  29. } 
    30. 
    
    
    
    
  30. style> 
    31. 
    
    
    
    
  31. head> 
    32. 
    
    
    
    
  32. <body> 
    33. 
    
    
    
    
  33. <div style='width:960px;height:600px;margin: 0px auto;'> 
    34. 
    
    
    
    
  34.     <div id='demo' style='width:200px;height:200px;border: 1px solid;margin: 0px auto;'> 
    35. 
    
    
    
    
  35.          
    36. 
    
    
    
    
  36.     div> 
    37. 
    
    
    
    
  37. div> 
    38. 
    
    
    
    
  38. <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'>script>  
    39. 
    
    
    
    
  39. <script type="text/javascript"> 
    40. 
    
    
    
    
  40. /** 
    41. 
    
    
    
    
  41.  * jquery resizable 
    42. 
    
    
    
    
  42.  * @author huxiaoqi 
    43. 
    
    
    
    
  43.  */ 
    44. 
    
    
    
    
  44. (function($){ 
    45. 
    
    
    
    
  45.     $.fn.resizable = function(cfg){ 
    46. 
    
    
    
    
  46.         var self = $(this); 
    47. 
    
    
    
    
  47.         var BD_E = $("<div class='ui-resizable-bd ui-resizable-bd-east'>div>"); 
    48. 
    
    
    
    
  48.         var BD_S = $("<div class='ui-resizable-bd ui-resizable-bd-south'>div>"); 
    49. 
    
    
    
    
  49.         var BD_SE = $("<div class='ui-resizable-bd ui-resizable-bd-corner'>div>"); 
    50. 
    
    
    
    
  50.         var WIDTH = self.width(); 
    51. 
    
    
    
    
  51.         var HEIGHT = self.height(); 
    52. 
    
    
    
    
  52.         var pos = self.offset(); 
    53. 
    
    
    
    
  53.         var BD_WIDTH = 3;   //default border width 
    54. 
    
    
    
    
  54.         var documentObj = $(document); 
    55. 
    
    
    
    
  55.         var bodyObj = $('body',documentObj); 
    56. 
    
    
    
    
  56.         /* 
    57. 
    
    
    
    
  57.          * 定义缩放最小值 
    58. 
    
    
    
    
  58.          */ 
    59. 
    
    
    
    
  59.         var _default = {                     
    60. 
    
    
    
    
  60.                             minwidth:50, 
    61. 
    
    
    
    
  61.                             minheight:50 
    62. 
    
    
    
    
  62.                         }; 
    63. 
    
    
    
    
  63.         var config = $.extend({},_default,cfg); 
    64. 
    
    
    
    
  64.         //放入节点 
    65. 
    
    
    
    
  65.         BD_E.insertAfter(self); 
    66. 
    
    
    
    
  66.         BD_S.insertAfter(self); 
    67. 
    
    
    
    
  67.         BD_SE.insertAfter(self); 
    68. 
    
    
    
    
  68.         setBDPos(WIDTH, HEIGHT, pos.left, pos.top); 
    69. 
    
    
    
    
  69.         documentObj.bind({ 
    70. 
    
    
    
    
  70.             'mousedown':function(e){ 
    71. 
    
    
    
    
  71.                 if(isBD(e.target)){ 
    72. 
    
    
    
    
  72.                     var currentTarget = e.target; 
    73. 
    
    
    
    
  73.                     var className = currentTarget.className; 
    74. 
    
    
    
    
  74.                     documentObj.bind('mousemove',function(e){ 
    75. 
    
    
    
    
  75.                         pos = self.offset(); 
    76. 
    
    
    
    
  76.                         WIDTH = self.width(); 
    77. 
    
    
    
    
  77.                         HEIGHT = self.height(); 
    78. 
    
    
    
    
  78.                         var width = e.pageX - pos.left; 
    79. 
    
    
    
    
  79.                         var height = e.pageY - pos.top; 
    80. 
    
    
    
    
  80.                         if(className.indexOf('bd-east') != -1){ 
    81. 
    
    
    
    
  81.                             /* 
    82. 
    
    
    
    
  82.                              * east border 
    83. 
    
    
    
    
  83.                              */                          
    84. 
    
    
    
    
  84.                             if(width > config.minwidth ){ 
    85. 
    
    
    
    
  85.                                 self.width(width); 
    86. 
    
    
    
    
  86.                                 setBDPos(width, HEIGHT, pos.left, pos.top); 
    87. 
    
    
    
    
  87.                             } 
    88. 
    
    
    
    
  88.                             bodyObj.css('cursor','e-resize'); 
    89. 
    
    
    
    
  89.                         } 
    90. 
    
    
    
    
  90.                         else if(className.indexOf('bd-south') != -1){ 
    91. 
    
    
    
    
  91.                             /* 
    92. 
    
    
    
    
  92.                              * south border 
    93. 
    
    
    
    
  93.                              */ 
    94. 
    
    
    
    
  94.                             if(height > config.minheight ){ 
    95. 
    
    
    
    
  95.                                 self.height(height); 
    96. 
    
    
    
    
  96.                                 setBDPos(WIDTH, height, pos.left, pos.top); 
    97. 
    
    
    
    
  97.                             } 
    98. 
    
    
    
    
  98.                             bodyObj.css('cursor','s-resize'); 
    99. 
    
    
    
    
  99.                         } 
    100. 
    
    
    
    
  100.                         else if(className.indexOf('bd-corner') != -1){ 
    101. 
    
    
    
    
  101.                             /* 
    102. 
    
    
    
    
  102.                              * south-east border 
    103. 
    
    
    
    
  103.                              */ 
    104. 
    
    
    
    
  104.                             if(width > config.minwidth && height > config.minheight){ 
    105. 
    
    
    
    
  105.                                 self.width(width); 
    106. 
    
    
    
    
  106.                                 self.height(height); 
    107. 
    
    
    
    
  107.                                 setBDPos(width, height, pos.left, pos.top); 
    108. 
    
    
    
    
  108.                             } 
    109. 
    
    
    
    
  109.                             bodyObj.css('cursor','se-resize'); 
    110. 
    
    
    
    
  110.                         } 
    111. 
    
    
    
    
  111.                     }); 
    112. 
    
    
    
    
  112.                 } 
    113. 
    
    
    
    
  113.             }, 
    114. 
    
    
    
    
  114.             'mouseup':function(e){ 
    115. 
    
    
    
    
  115.                 documentObj.unbind('mousemove'); 
    116. 
    
    
    
    
  116.                 bodyObj.css('cursor','default'); 
    117. 
    
    
    
    
  117.             } 
    118. 
    
    
    
    
  118.         }); 
    119. 
    
    
    
    
  119.          
    120. 
    
    
    
    
  120.         //get border position 
    121. 
    
    
    
    
  121.         function setBDPos(w,h,l,t){ 
    122. 
    
    
    
    
  122.             BD_E.css({'width':BD_WIDTH,'height':h,'left':l+w,'top':t}); 
    123. 
    
    
    
    
  123.             BD_S.css({'width':w,'height':BD_WIDTH,'top':t+h,'left':l}); 
    124. 
    
    
    
    
  124.             BD_SE.css({'left':l+w-BD_SE.width(),'top':t+h-BD_SE.height()}); 
    125. 
    
    
    
    
  125.         }; 
    126. 
    
    
    
    
  126.         //justify target is border ? 
    127. 
    
    
    
    
  127.         function isBD(target){       
    128. 
    
    
    
    
  128.             if(target && target.className){ 
    129. 
    
    
    
    
  129.                 return target.className.indexOf('ui-resizable-bd') != -1; 
    130. 
    
    
    
    
  130.             }    
    131. 
    
    
    
    
  131.             return false; 
    132. 
    
    
    
    
  132.         } 
    133. 
    
    
    
    
  133.     }; 
    134. 
    
    
    
    
  134. })(jQuery); 
    135. 
    
    
    
    
  135. script> 
    136. 
    
    
    
    
  136. <script type="text/javascript"> 
    137. 
    
    
    
    
  137. $('#demo').resizable(); 
    138. 
    
    
    
    
  138. script> 
    139. 
    
    
    
    
  139. body> 
    140. 
    
    
    
    
  140. html> 
    141.