您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
看着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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。