jQuery - Làm thế nào để biết nếu cửa sổ được thay đổi kích thước theo chiều rộng/chiều cao hoặc cả hai?

Question

Tôi có một vấn đề nhỏ với việc thay đổi kích thước cửa sổ bằng chức năng của jQuery .resize(). Tôi muốn biết kích thước nào đang lớn hơn/nhỏ hơn - chiều rộng hoặc chiều cao. Tôi cần điều này vì nếu tôi chỉ cần đặt hai điều kiện - nếu chiều rộng là 50px lớn hơn div và nếu chiều cao là 50px lớn hơn div,

// (pseudocode) 
if width = div.width + 50px 
    width = something 
if height = div.height + 50px 
    height = something 

sau đó đang làm việc trên chỉ là một điều kiện và tôi có thể thay đổi kích thước chỉ có chiều rộng hoặc Chiều cao.

Làm cách nào để biết kích thước nào đang thay đổi về kích thước hoặc nếu cả hai là?

Answer 1

Bằng cách lưu các giá trị kích thước cửa sổ cuối cùng trong các biến.

var h = $(window).height(), w = $(window).width(); 
$(window).resize(function(){ 

    var nh = $(window).height(), nw = $(window).width(); 
    // compare the corresponding variables. 
    h = nh; w = nw; // update h and w; 
}); 

Answer 2

Lưu kích thước trước đó và so sánh với kích thước đó trước khi thay đổi.

Đối với ví dụ:

var prevW = -1, prevH = -1; 

$(document).ready(function() { 

    // ... other stuff you might have inside .ready() 

    prevW = $(window).width(); 
    prevH = $(window).height(); 
}); 

$(window).resize(function() { 
    var widthChanged = false, heightChanged = false; 
    if($(window).width() != prevW) { 
     widthChanged = true; 
    } 
    if($(window).height() != prevH) { 
     heightChanged = true; 
    } 

    // your stuff 

    prevW = $(window).width(); 
    prevH = $(window).height(); 

}); 

Demo:http://jsfiddle.net/44aNW/