zoukankan      html  css  js  c++  java
  • 怎样给div增加resize事件

    当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件,这个事件在window上面触发,那么如何给div元素增加resize事件,监听div的高度或宽度的改变呢?

    先来回答另一个问题,监听div的高度变化又有什么用呢?一般而言div的高度是随着内容的增加而自适应的,对于ajax请求的数据还没有加载时,此时div的内容为空,在ajax数据返回后,div的高度就自然会自适应内容而增高了,监听这个变化也就等同于知道ajax请求类的promise什么时候返回数据,就可以不在ajax数据服务回调中处理其它非数据服务相关的逻辑了,也在一定程度上降低了数据服务和其它业务的耦合性。

    某位大神用jquery实现的方法,这样就可以 $('div').resize(function(){ .. })直接使用了;

    (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);
  • 相关阅读:
    机器学习---14
    机器学习---13
    机器学习--10
    机器学习--9
    机器学习--8
    机器学习--7
    机械学习--6
    大数据应用技术课程实践--选题与实践方案
    15.手写数字识别-小数据集
    14.深度学习-卷积
  • 原文地址:https://www.cnblogs.com/weboey/p/6014966.html
Copyright © 2011-2022 走看看