Question

我试图调整窗口大小。它水平工作但不垂直工作。我在这做错了什么：

$(window).resize(resizeWebSite());

function resizeWebSite(){

    $("#panel").height($(window).height() - 10);
    $("#map").height($(window).height() - 10);

     console.log($("#map").height() / 2);   

     var loaderTop = ($("#map").height() - $("#loadingIndicator").height()) / 100 + $("#map").position().top;
     var loaderLeft = (($("#map").width() - $("#loadingIndicator").width()) / 100) + $("#map").position().left;


    $("#loadingIndicator").css({'position' : 'absolute' , 'left' : loaderLeft + 'px', 'top' : loaderTop + 'px'});    
}

resizeWebSite();

Answer 1

设置事件处理程序时，只需传递函数的名称：

$(window).resize(resizeWebSite);

现在另一个问题是，在桌面/笔记本电脑（传统计算机，而不是平板电脑）上，用户可以交互式地调整浏览器窗口的大小，浏览器将非常快速地激活“调整大小”事件。处理程序内部的所有工作都会使响应非常迟缓和跳跃。

要抵消这种情况，您可以使用计时器。想法是通过首先取消任何挂起的计时器，然后在将来的一段时间内设置一个新的计时器（大约一百毫秒）来响应“调整大小”事件，以运行处理新窗口大小的实际代码。这样，当用户快速移动鼠标以更改窗口大小时，您正在做的唯一工作是清除和重置计时器，这非常快。只有当用户停止移动鼠标一段时间后，您才真正做任何实际工作。

这看起来像这样：

var resizeTimer = null;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(resizeWebSite, 100);
});

Answer 2

也许这就是你追求的目标？

function resizeWebSite(){

    $("#panel").height($(window).height() - 10);
    $("#map").height($(window).height() - 10);

     console.log($("#map").height() / 2);   

     var loaderTop = ($("#map").height() - $("#loadingIndicator").height()) / 100 + $("#map").position().top;
     var loaderLeft = (($("#map").width() - $("#loadingIndicator").width()) / 100) + $("#map").position().left;


    $("#loadingIndicator").css({'position' : 'absolute' , 'left' : loaderLeft + 'px', 'top' : loaderTop + 'px'});    
}

$(document).ready(resizeWebSite);    
$(window).resize(resizeWebSite);

顺便说一下，如果您在阅读高度的元素上使用margin，并且想要将它们包含在计算中，请使用outerWidth(true)代替{{1} }

窗口垂直重新调整大小问题

2 个答案: