jquery 监听div大小变化函数|div resize事件

http://www.itshij.com/divresize

今天，小编给大家整理的是监听div大小变化的jquery扩展，通过这个函数扩展jquery，使div也具有和窗口一样的resize功能

监听div大小变化

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

//监听div大小变化

(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);

下面是调用方法

调用方法

JavaScript

1

2

3

4

$("#main").resize(function(){

    //当id为main的div大小变化时的处理函数写在这里.....

    //当然了#main只不过是id选择器，你也可以换成任何jquery的选择器......

});

怎么样是不是很不错啊……

转载请注明：IT视界 » jquery 监听div大小变化函数|div resize事件

喜欢 (11)