1. 程式人生 > 實用技巧 >JQ對頁面中某個DIV的大小變化進行監聽

JQ對頁面中某個DIV的大小變化進行監聽

 1 //監聽div大小變化
 2 (function($, h, c) {
 3     var a = $([]),
 4     e = $.resize = $.extend($.resize, {}),
 5     i,
 6     k = "setTimeout",
 7     j = "resize",
 8     d = j + "-special-event",
 9     b = "delay",
10     f = "throttleWindow";
11     e[b] = 250;
12     e[f] = true;
13     $.event.special[j] = {
14 setup: function() { 15 if (!e[f] && this[k]) { 16 return false; 17 } 18 var l = $(this); 19 a = a.add(l); 20 $.data(this, d, { 21 w: l.width(), 22 h: l.height() 23 });
24 if (a.length === 1) { 25 g(); 26 } 27 }, 28 teardown: function() { 29 if (!e[f] && this[k]) { 30 return false; 31 } 32 var l = $(this); 33 a = a.not(l); 34 l.removeData(d);
35 if (!a.length) { 36 clearTimeout(i); 37 } 38 }, 39 add: function(l) { 40 if (!e[f] && this[k]) { 41 return false; 42 } 43 var n; 44 function m(s, o, p) { 45 var q = $(this), 46 r = $.data(this, d); 47 r.w = o !== c ? o: q.width(); 48 r.h = p !== c ? p: q.height(); 49 n.apply(this, arguments); 50 } 51 if ($.isFunction(l)) { 52 n = l; 53 return m; 54 } else { 55 n = l.handler; 56 l.handler = m; 57 } 58 } 59 }; 60 function g() { 61 i = h[k](function() { 62 a.each(function() { 63 var n = $(this), 64 m = n.width(), 65 l = n.height(), 66 o = $.data(this, d); 67 if (m !== o.w || l !== o.h) { 68 n.trigger(j, [o.w = m, o.h = l]); 69 } 70 }); 71 g(); 72 }, 73 e[b]); 74 } 75 })(jQuery, this);

使用:

$("div元素").resize(function(){
    // 處理操作
});