效果图如下
代码如下:
1 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 2 ;(function($){ 3 $.extend($.fn,{ 4 resizable:function(options){ 5 var $d = $(document); 6 var defaults = { 7 el : null, 8 min: { width: 0, height: 0 }, //限制允许拖动为最小宽高 9 max: { width: $d.width(), height: $d.height()}, //限制允许拖动为最大宽高 10 _move: function(){}, //拖动过程回调 11 _stop: function(){} //拖动完成回调 12 }; 13 var options = $.extend(defaults,options); 14 this.each(function(){ 15 var self=this; 16 var action={ 17 el:null, 18 init:function(){ 19 this.el = options.el?options.el:$(self); 20 this.el.bind('mousedown',{data:self},this.bindResize); 21 }, 22 bindResize:function(e){ 23 $('body').css({'-moz-user-select':'none','-o-user-select':'none','user-select':'none'}); 24 var el = $(e.data.data); 25 var data = { 26 el: el, 27 width: el.width(), 28 height: el.height(), 29 min: options.min, 30 max: options.max, 31 left: e.pageX, 32 top: e.pageY 33 } 34 $d.bind('mousemove', { data: data }, action.resize).bind('mouseup', { data: data }, action.stopMove).bind('selectstart',action.disableSelect); 35 }, 36 resize:function(e){ 37 var d = e.data.data; 38 var width = e.pageX - d.left + d.width; 39 var height = e.pageY - d.top + d.height; 40 width = Math.min(Math.max(width, d.min.width), options.max.width); 41 height = Math.min(Math.max(height, d.min.height), options.max.height); 42 d.el.css({ 43 width: width, 44 height: height 45 }); 46 options._move(e); 47 }, 48 stopMove:function(e){ 49 var d = e.data.data; 50 $d.unbind('mousemove', action.resize).unbind('mouseup',action.stopMove).unbind('selectstart',action.disableSelect); 51 $('body').css({'-moz-user-select':'text','-o-user-select':'text','user-select':'text'}); 52 options._stop(e); 53 }, 54 disableSelect:function(){ 55 return false; 56 } 57 }; 58 action.init(); 59 }); 60 return this; 61 } 62 }); 63 })(jQuery) 64 65 ;(function($){ 66 //随意拖动修改大小调用 67 $('.resize').resizable({ 68 el: $('.handler'), //拖动按钮 69 min: { width: 300, height: 150 },//最小宽高 70 max: { width: 500, height: 380 } //最大宽高 71 }); 72 })(jQuery)
1 /* resize */ 2 .resize{width: 500px; height: 380px; position:relative;background:#eee; border: 1px solid #999; padding:1px; float:left; margin:10px 0px; overflow:hidden;} 3 .resize h1{ height:30px; background:#ccc; line-height:30px; font-size:16px; font-weight:normal; padding-left:10px;} 4 .resizeContent{ padding:5px 10px;} 5 .handler{width: 15px; height: 15px; border-right: solid 1px #999; border-bottom: solid 1px #999; position: absolute; right: 1px; bottom: 1px; cursor: nw-resize;}
<div class="resize"> <h1>测试标题</h1> <div class="resizeContent"> 作为一个辅助型英雄,辉煌光环是冰女的核心技能,全屏的的回魔能够为队友提供更强的续航能力,所以7级必须升满;而冰霜新星的减速和冰封禁锢能够帮助和支援队友的gank,关键时还能救命,所以前期都要升,不过由于冰封禁锢的控制时间会随等级上升,而冰霜新星的减速为固定的5秒,所以冰封禁锢要第二个升满;大招极寒领域的AOE伤害非常可观,可以用于清兵和团战,不过由于需要持续施法和冰女过于脆弱,因此作用不太明显,16级升满级可;前期黄点能够撑一些属性。 </div> <div class="handler"></div> </div> <div class="clear"></div>