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

方法一：

$(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() {
    // ...
});

 

License

This plugin is licensed under the MIT license. A copy of the license is included in this package.

 

项目地址：https://github.com/nielse63/jquery.resizeend

主页：http://nielse63.github.io/jquery.resizeend/

下载：jquery.resizeend-master

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