jquery监听窗口大小改变事件jquery.resizeend

最新推荐文章于 2025-01-09 11:17:14 发布

原创最新推荐文章于 2025-01-09 11:17:14 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #python #ViewUI

Javascript /Jquery / Bootstrap / Web 专栏收录该内容

434 篇文章

订阅专栏

本文介绍了jQuery的resizeend插件，用于在窗口大小改变停止后执行回调函数。提供了两种方法，包括直接使用插件和绑定事件，并详细说明了如何设置延迟时间和使用选项。还包含了项目的演示、用法、选项以及MIT许可证信息。

方法一：

$(function(){
  // Bind the resize event. When any test element's size changes, update its
  // corresponding info div.
  $('.test').resize(function(){
    var elem = $(this);
    
    // Update the info div width and height - replace this with your own code
    // to do something useful!
    elem.closest('.container').find('.info')
      .text( this.tagName + ' width: ' + elem.width() + ', height: ' + elem.height() );
  });
  
  // Update all info divs immediately.
  $('.test').resize();
  
  // Add text after inline "add text" links.
  $('.add_text').click(function(e){
    e.preventDefault();
    $(this).parent().append( ' Adding some more text, to grow the parent container!' );
  });
  
  // Resize manually when the link is clicked, but only for the first paragraph.
  $('.add_text:first').click(function(){
    $(this).parent().resize();
  });
});

$(function(){
  // Bind the resize event. When the window size changes, update its corresponding
  // info div.
  $(window).resize(function(){
    var elem = $(this);
    
    // Update the info div width and height - replace this with your own code
    // to do something useful!
    $('#window-info').text( 'window width: ' + elem.width() + ', height: ' + elem.height() );
  });
  
  // Updates the info div immediately.
  $(window).resize();
});

原文：http://benalman.com/code/projects/jquery-resize/examples/resize/

方法二：插件 jQuery resizeend

jQuery resizeend

A jQuery plugin that allows for window resize-end event handling.

Demo

See the demo here.

Usage

Include both the jQuery library and the resizeend plugin in your project:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.resizeend.js"></script>

Execute the resizeend method to an element, instatiate options (if so desired), and run a callback functions:

$(window).resizeend({
    delay : 250
}, function() {
    // ...
});

Or bind an element to the event, passing in options and event handler:

$(window).on('resizeend', 250, function() {
    // ...
});

If you want to use the default delay setting of 250ms, simply don't include the options object:

$(window).resizeend(function() {
    // ...
});

Options

The only option available is the delay time (in milliseconds) to execute the callback after the browser has stopped being resized. The default value is 250ms. This can be passed as either a number or object:

// As a number
$(window).on('resizeend', 250, function() {
    // ...
});

// As an object
$(window).on('resizeend', { delay : 250 }, function() {
    // ...
});