jquery resize 如何监听div或其它元素的resize事件

jquery 默认的resize只能监听到浏览器窗口大小的改变，但我们在实际使用过程中有可能还需要监听某个div或其它标签的大小改变来执行相应的处理，如果使用默认的resize就无能为力了。怎么办呢，这里给大家推荐一个jquery的小插件，相当于是对默认的resize事件的增强版本，它可以监听几乎所有标签的大小改变来做相应的处理。

将以下代码复制到你的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] = 350;
			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);

 

在代码里面我们可以直接使用 $("#div").resize(function(){...}); 来实现监听 id为div元素的尺寸改变时做相应的逻辑处理。