1. 默认情况下jquery的resize
$(window).resize(function () {console.log(111);});//只会响应浏览器的窗口大小变化
如果要resize想用dom元素的宽高变化,则需要引入jquery的另外一个插件
(下载地址:/jquery-resize/1.1/jquery.ba-resize.min.js),内容如下:
/** jQuery resize event - v1.1 - 3/14/* /projects/jquery-resize-plugin/* * Copyright (c) "Cowboy" Ben Alman* Dual licensed under the MIT and GPL licenses.* /about/license/*/(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);
引入这个插件后,resize将会响应dom元素的宽高变化,如下:当id为content的元素宽高变化后将触发回调
$("#content").resize(function () {console.log(111);});
有时候我们不仅仅只是需要监听宽高的变化,还需要监听其他属性,已经子节点增加删除等,请查看我的另一篇文章:
/D_bel/article/details/97159844