`

给元素添加resize事件

 
阅读更多
(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);


当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件,这个事件在window上面触发,那么如何给div元素增加resize事件,监听div的高度或宽度的改变呢?
某位大神用jquery实现的方法,这样就可以 $('div').resize(fucntion(){ .. })直接使用了;
分享到:
评论

相关推荐

    解决firefox下resize事件无效问题

    // 你的resize事件处理代码 }); }, 0); }); ``` 2. **使用MutationObserver**:另一种方法是通过观察DOM的变化来触发`resize`事件。`MutationObserver` API允许我们监听DOM结构的变动,当窗口大小改变导致DOM...

    resize:任何 HTML 元素的调整大小事件

    像往常一样向任何元素添加“onresize”事件侦听器。 与 jquery 一起玩也很好。 ###贡献 拉请求是要走的路。 使用 coffeescript 作为 js 预处理器,所以我期待any-resize-event.coffee文件的变化。 环境 使用作为...

    jquery下div 的resize事件示例代码

    最后,通过`(jQuery, this)`执行这个函数,使得`$`和`window`对象作为参数传入,这样就可以直接使用`$(‘div’).resize()`来为div元素添加resize事件处理器了。 总结来说,这段代码实现了jQuery对div元素的resize...

    JS可拖动,可改变大小resize div

    1. **添加事件监听器**:我们需要监听鼠标按下(mousedown)、移动(mousemove)和松开(mouseup)事件。这些事件是实现拖动和调整大小的关键。 2. **初始化状态**:在鼠标按下时,记录下当前鼠标位置和div的原始...

    jquery实现父元素大小改变插件:jquery-resize

    然后,你可以通过以下方式将`jQuery-resize`插件添加到项目中: ```html <script src="path/to/jquery.js"></script> <script src="path/to/jquery.resize.js"> ``` 在JavaScript代码中,你可以使用`.resize()`...

    vue-resize:检测DOM元素大小调整的通用组件

    这个组件的核心功能在于它能够监听窗口或特定DOM元素的resize事件,并在尺寸发生变化时触发回调函数。 首先,安装`vue-resize`组件可以使用npm或yarn: ```bash npm install vue-resize # 或 yarn add vue-resize ...

    浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法

    然而,当涉及到框架(frame)或者iframe时,直接在主页面中使用`resize`事件可能无法正确地响应框架内的元素。针对这种情况,我们可以采取以下两种方法来解决问题。 方法一: 在框架标签上添加`onLoad`和`onResize`...

    jquery.ba-resize.js

    “jquery.ba-resize.js”是基于jQuery的一个插件,它的主要功能是添加对元素大小调整事件的支持。在JavaScript中,虽然window对象有一个`resize`事件,可以监听浏览器窗口大小的变化,但并不能监听到DOM元素自身的...

    dragresize 可让用户调整页面DIV的大小和位置

    然后,你需要选择想要添加拖放和调整大小功能的DOM元素,使用dragresize库提供的API对其进行初始化配置。例如,可以这样设置: ```javascript var myDiv = document.getElementById('myDiv'); dragresize.enable...

    gwtquery-resize-plugin:为元素添加调整大小支持的 gwtQuery 插件

    一个 gwtQuery 插件,可为任何 DOM 元素添加resize事件支持。 它使用一个隐藏的 html 对象来观察容器中的大小变化。 容器必须具有相对位置或任何其他样式,允许绝对子项在容器发生变化时进行更改。 它的灵感来自:...

    DragResize

    此外,为了确保层的拖动和调整大小操作在页面范围内有效,我们需要添加边界检查,避免层超出页面范围。这可以通过比较层的边界与浏览器窗口的边界来实现。 "html可移动层脚本"的标签暗示了这个脚本可能还包含了其他...

    Vueresize检测HTML调整大小事件的vue指令

    使用 Vue.resize 指令非常简单,只需要在需要监听尺寸变化的元素上添加 `v-resize` 并传递一个回调函数。当元素尺寸发生变化时,这个回调函数会被调用,提供当前元素的新尺寸作为参数。这使得我们可以动态响应元素...

    angular-drag-resize:可拖动元素和可调整大小元素的Angular指令

    角度拖曳调整大小用于拖动和调整元素大小的Angular.js指令。演示版动机drag指令是从有角度的文档中获取的( ),不幸的是,它破坏了css resize属性。 在此包中找到的resize指令允许可拖动元素也被调整...然后向元素添加

    深度解读vue-resize的具体用法

    `vue-resize` 是一个专门为 Vue.js 设计的插件,它提供了一个优雅的方式来处理元素的 resize 事件,解决了传统方法的一些痛点。 传统的方法是通过 JavaScript 直接添加事件监听器,如 `element.addEventListener(...

    drag-resize:使任何 DOM 元素都可以调整大小和拖动

    拖动调整大小 这是一个 Polymer 元素,它使任何 DOM 元素都可以拖动和调整大小。... 然后,将drag-resize属性添加到要拖动和调整大小的元素,例如: < drag> <!-- add the attribute "drag-resize

    resize-rhythm:向任何元素添加垂直节奏

    调整大小节奏可在窗口调整大小时测量元素的高度,并添加必要的边距底部以保持您提供的任何垂直节奏。 用法 $(选择器).resize-rhythm([height]) 例子 适用于所有使用12px基线的图像$( 'img' ).resize-rhythm(12) ...

    支持拖坠DIV覆盖文本dragresize(老外的快乐)

    为了支持拖曳限定范围,可以在`mousemove`事件处理函数中添加边界检查,确保`DIV`不会超出指定的区域。例如,你可以定义一个包含`DIV`的容器,并限制`DIV`在其内部移动。 对于`DIV`上的覆盖文本,这可以通过CSS的`...

    PB事件代码

    3. **状态改变事件**:如`pbm_bndisable`表示控件被禁用,这类事件可用于动态更新界面元素的可用性。 4. **绘图事件**:`pbm_bnpaint`用于绘制控件的外观,通常在控件大小或位置发生变化时触发。 5. **编辑控制...

Global site tag (gtag.js) - Google Analytics