看着jquery的大小收缩，自己也尝试写了一个，其实就是增加了三个div来控制大小。
效果图
计算
安全
数据库
网络和加速
企业服务
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>resizable</title> <style type="text/css"> body{ -moz-user-focus:ignore; -moz-user-input:disabled; -moz-user-select:none; } .ui-resizable-bd{ background:none; position: absolute; z-index: 1000; } .ui-resizable-bd-east{ cursor: e-resize; } .ui-resizable-bd-south{ cursor: s-resize; } .ui-resizable-bd-corner{ width:16px; height:16px; cursor: nw-resize; /* 右下角小图标 */ background: url(p_w_picpaths/resizable.JPG) no-repeat; } </style> </head> <body> <div style='width:960px;height:600px;margin: 0px auto;'> <div id='demo' style='width:200px;height:200px;border: 1px solid;margin: 0px auto;'> </div> </div> <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> <script type="text/javascript"> /** * jquery resizable * @author huxiaoqi */ (function($){ $.fn.resizable = function(cfg){ var self = $(this); var BD_E = $("<div class='ui-resizable-bd ui-resizable-bd-east'></div>"); var BD_S = $("<div class='ui-resizable-bd ui-resizable-bd-south'></div>"); var BD_SE = $("<div class='ui-resizable-bd ui-resizable-bd-corner'></div>"); var WIDTH = self.width(); var HEIGHT = self.height(); var pos = self.offset(); var BD_WIDTH = 3; //default border width var documentObj = $(document); var bodyObj = $('body',documentObj); /* * 定义缩放最小值 */ var _default = { minwidth:50, minheight:50 }; var config = $.extend({},_default,cfg); //放入节点 BD_E.insertAfter(self); BD_S.insertAfter(self); BD_SE.insertAfter(self); setBDPos(WIDTH, HEIGHT, pos.left, pos.top); documentObj.bind({ 'mousedown':function(e){ if(isBD(e.target)){ var currentTarget = e.target; var className = currentTarget.className; documentObj.bind('mousemove',function(e){ pos = self.offset(); WIDTH = self.width(); HEIGHT = self.height(); var width = e.pageX - pos.left; var height = e.pageY - pos.top; if(className.indexOf('bd-east') != -1){ /* * east border */ if(width > config.minwidth ){ self.width(width); setBDPos(width, HEIGHT, pos.left, pos.top); } bodyObj.css('cursor','e-resize'); } else if(className.indexOf('bd-south') != -1){ /* * south border */ if(height > config.minheight ){ self.height(height); setBDPos(WIDTH, height, pos.left, pos.top); } bodyObj.css('cursor','s-resize'); } else if(className.indexOf('bd-corner') != -1){ /* * south-east border */ if(width > config.minwidth && height > config.minheight){ self.width(width); self.height(height); setBDPos(width, height, pos.left, pos.top); } bodyObj.css('cursor','se-resize'); } }); } }, 'mouseup':function(e){ documentObj.unbind('mousemove'); bodyObj.css('cursor','default'); } }); //get border position function setBDPos(w,h,l,t){ BD_E.css({'width':BD_WIDTH,'height':h,'left':l+w,'top':t}); BD_S.css({'width':w,'height':BD_WIDTH,'top':t+h,'left':l}); BD_SE.css({'left':l+w-BD_SE.width(),'top':t+h-BD_SE.height()}); }; //justify target is border ? function isBD(target){ if(target && target.className){ return target.className.indexOf('ui-resizable-bd') != -1; } return false; } }; })(jQuery); </script> <script type="text/javascript"> $('#demo').resizable(); </script> </body> </html> 亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
