中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jquery調整大小(resizable)

發布時間：2020-04-29 17:51:18 來源：網絡 閱讀：1211 作者：huxiaoqi567 欄目：web開發

 看著jquery的大小收縮，自己也嘗試寫了一個，其實就是增加了三個div來控制大小。

jquery調整大小(resizable)效果圖

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

 

向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
江陵县| 江孜县| 长泰县| 高阳县| 三明市| 视频| 临猗县| 北安市| 德昌县| 比如县| 南乐县| 曲水县| 吉林省| 岐山县| 苏州市| 上思县| 班玛县| 中牟县| 乐平市| 渑池县| 伊川县| 鄄城县| 蒙阴县| 清丰县| 汾阳市| 奎屯市| 遂宁市| 松溪县| 南开区| 吴川市| 丹东市| 台江县| 阿鲁科尔沁旗| 阿拉尔市| 乐都县| 双流县| 客服| 濮阳县| 伊吾县| 长治市| 南昌市|