重写resize方法,监听html标签大小的改变
来源:互联网 发布:加工中心编程100例图 编辑:程序博客网 时间:2024/05/16 11:53
jquery 默认的resize只能监听到浏览器窗口大小的改变,但我们在实际使用过程中有可能还需要监听某个div或其它标签的大小改变来执行相应的处理,如果使用默认的resize就无能为力了。怎么办呢,这里给大家推荐一个jquery的小插件,相当于是对默认的resize事件的增强版本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] = 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);
在代码里面我们可以直接使用 $("#div").resize(function(){...}); 来实现监听 id为div元素的尺寸改变时做相应的逻辑处理。
0 0
- 重写resize方法,监听html标签大小的改变
- OpenCV resize函数改变图像的大小
- 重写按钮的方法,改变其图片的大小
- OpenCV改变图像大小的操作,resize与图像金字塔方法
- OpenCV改变图像大小的操作,resize与图像金字塔方法
- 改变图像大小(Resize)
- VueJs 监听 window.resize 方法
- VueJs 监听 window.resize 方法
- opencv改变图像大小cvResize和resize
- arcgis api for javascript 地图随着所在div大小的变化而改变的resize()事件
- cut, resize,剪切,重新大小,改变单元格大小
- echarts 随屏幕大小改变大小chart.resize()
- STL中队列QUEUE中元素改变大小(resize)可能出现的问题!
- 对话框上右下角显示resize icon(可以拖动改变对话框的大小)
- 对话框上右下角显示resize icon(可以拖动改变对话框的大小)
- Cloudstack4.2之改变数据卷容量的大小(Resize Data Volumes)
- Cloudstack4.2之改变数据卷容量的大小(Resize Data Volumes) | CloudStack中国用户组
- VueJs 监听 window.resize 方法---窗口变化
- 智能电表为MCU打开新市场
- 叶俊:别让“对抗”惯性摧毁你的幸福人生
- 看代码猜古诗哈哈逗死我了
- android框架解密,导读
- Sort List
- 重写resize方法,监听html标签大小的改变
- 鼠标滑过图标划出左侧菜单
- 微信小程序部署HTTPS报错怎么办?
- 叶俊:领袖需要思考的问题
- C++中如何使类不能继承
- 微信开发专题---2.ngrok安装使用
- VS2012:error LNK2026: 模块对于 SAFESEH 映像是不安全的
- avalon绑定属性总结
- HDU - 2710 Max Factor