监听页面元素宽高发生改变 resize

本文介绍了一种使用jQuery监听页面元素宽度和高度变化的方法,并提供了详细的实现代码。通过该方法可以确保在元素尺寸发生变化时能够及时执行相应的处理函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

监听浏览器窗口发生改变时:

$(window).resize(function() {

你要执行的函数

});

监听页面元素宽高发生改变时:

(function($, h, c) {  
    var a = $([]), e = $.resize = . e x t e n d ( .extend( .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 = KaTeX parse error: Expected 'EOF', got '}' at position 173: …               }̲               ….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);

请先执行上面函数后,

$(’#element).resize(function(){//监听页面元素发生改变

你要执行的函数

});

作者:liumangjiyi
来源:优快云
原文:https://blog.youkuaiyun.com/liumangjiyi/article/details/78283963
版权声明:本文为博主原创文章,转载请附上博文链接!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值