调整大小的方向

Direction of Resize

本文关键字：方向 调整      更新时间：2023-09-26

我正在绑定到浏览器的重新大小，如下所示：

$(window).resize(function (e) { /* do stuff */ });

有没有一种方法，使用e，来确定窗口的大小是垂直调整还是水平调整，或者两者兼而有之？如果我能事先确定宽度和高度，我可以对它进行处理，但我不知道如何使用事件数据。

我想我可以保留两个变量，并在窗口重新调整时对它们进行比较/更改，但我希望有一种方法可以避免这种情况，只从事件中获取数据。

提前感谢您的帮助！

Likwid_T完美建议！$(window).data()非常适合这一点。

所以你可以在没有$.event:的情况下完成它

$(window).data("old", {width: $(window).width(), height: $(window).height()});
$(window).resize(function(e) {
    console.log($(this).data("old").width + " - " + $(this).width());
    console.log($(this).data("old").height + " - " + $(this).height());
    $(window).data("old", {width: $(this).width(), height: $(this).height()});
});​

或者使用$.event:

$(window).data("old", {width: $(window).width(), height: $(window).height()});
$.event.add(window, "resize", function(e) {
    e.old = {};
    e.old.width = $(window).data("old").width;
    e.old.height = $(window).data("old").height;
    $(window).data("old", {width: $(window).width(), height: $(window).height()});
    return e;
})
$(window).resize(function(e) {
    console.log(e.old.width + " - " + $(this).width());
    console.log(e.old.height + " - " + $(this).height());
});​

这里有一个可以用来查找浏览器窗口大小的链接：谷歌搜索。

现在要回答您的问题，请使用上面的链接存储原始浏览器大小，并将其与更改后的宽度和高度值进行比较，以查看是垂直、水平还是同时更改。

下面是jQuery中的一个例子：

var h = $(window).height(); // height
var w = $(window).width() // width
$(window).resize(function(e) {
    // check for change
});
相关文章：