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

最新推荐文章于 2024-04-09 17:36:45 发布

老白干之再干

最新推荐文章于 2024-04-09 17:36:45 发布

阅读量269

点赞数

本文链接：https://blog.csdn.net/yrryyff/article/details/84077102

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

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