首先我们先了解js中resize功能只支持window对象
正常情况下我们队某一元素使用resize功能是无法监听到元素宽高变化的。
1.重构resize()
在已经引入jquery的情况下
js文件中增加以下代码
(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);
使用方法
然后就可以直接使用了
//obj为目标对象，function为响应函数$(obj).resize(function(){});
