基于jquery的监听某个元素高度变化resize事件

妖狐艹你老母 2022-05-25 07:29 915阅读 0赞

//一个jquery的插件，用于监听元素宽度高度变化，调用方式：
        //$("classname").bind('resize',function(){
            //callback
            //...
            //...
        //});
         (function ($, window, undefined) {
                    var elems = $([]),
                        jq_resize = $.resize = $.extend($.resize, {}),
                        timeout_id,
                        str_setTimeout = 'setTimeout',
                        str_resize = 'resize',
                        str_data = str_resize + '-special-event',
                        str_delay = 'delay',
                        str_throttle = 'throttleWindow';
                    jq_resize[str_delay] = 250;
                    jq_resize[str_throttle] = true;
                    $.event.special[str_resize] = {
                        setup: function () {
                            if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                                return false;
                            }
                            var elem = $(this);
                            elems = elems.add(elem);
                            $.data(this, str_data, {
                                w: elem.width(),
                                h: elem.height()
                            });
                            if (elems.length === 1) {
                                loopy();
                            }
                        },
                        teardown: function () {
                            if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                                return false;
                            }
                            var elem = $(this);
                            elems = elems.not(elem);
                            elem.removeData(str_data);
                            if (!elems.length) {
                                clearTimeout(timeout_id);
                            }
                        },
                        add: function (handleObj) {
                            if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                                return false;
                            }
                            var old_handler;
    
                            function new_handler(e, w, h) {
                                var elem = $(this),
                                    data = $.data(this, str_data);
                                data.w = w !== undefined ? w : elem.width();
                                data.h = h !== undefined ? h : elem.height();
                                old_handler.apply(this, arguments);
                            }
    
                            if ($.isFunction(handleObj)) {
                                old_handler = handleObj;
                                return new_handler;
                            } else {
                                old_handler = handleObj.handler;
                                handleObj.handler = new_handler;
                            }
                        }
                    };
    
                    function loopy() {
                        timeout_id = window[str_setTimeout](function () {
                            elems.each(function () {
                                var elem = $(this),
                                    width = elem.width(),
                                    height = elem.height(),
                                    data = $.data(this, str_data);
                                if (width !== data.w || height !== data.h) {
                                    elem.trigger(str_resize, [data.w = width, data.h = height]);
                                }
                            });
                            loopy();
                        }, jq_resize[str_delay]);
                    }
                })(jQuery, this);

调用方式

//bind resize事件
    $("body").bind('resize',function(){
        //callback
        //...
        //...
    });