javascript - 将 div 放在中心并在用户尝试调整窗口大小时更新函数

Question

var wH = $(window).height();
var wW = $(window).width();
var sT = $(window).scrollTop();
var sL = $(window).scrollLeft();

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, ((wH - $(this).outerHeight()) / 2) + sT) + "px");
    this.css("left", Math.max(0, ((wW - $(this).outerWidth()) / 2) + sL) + "px");
    return this;
}

$('div').center();

我试着将 div 放在页面的中心，我发现一个函数可以做到这一点。

但是，当窗口调整大小或用户尝试缩小时，此函数不会更新新位置。

当用户尝试调整窗口大小或缩小窗口时是否要运行此函数？

Answer 1

我相信 jQuery resize 方法应该完全符合您的要求:

$(window).resize(function () {
    $('div').center();
});

或者，您可以使用普通的 DOM 方法执行此操作:

window.onresize = function () { $('div').center(); };

但是，普通 DOM 方法将删除绑定(bind)到窗口调整大小事件的任何现有处理程序，并且在浏览器之间的行为可能不同。

另外，您需要将这些行移动到您的函数中，以便它们在处理程序被调用时更新:

var wH = $(window).height();
var wW = $(window).width();
var sT = $(window).scrollTop();
var sL = $(window).scrollLeft();