Question

我在HTML中有一个简单的搜索表单：

<div class="mainWindow">
    <form action="#">
        <input type="text" id="query" placeholder="Search..." autofocus required />
        <input type="button" id="button" value="SEARCH" />
    </form>
</div>

我使用jQuery的代码将默认位置mainWindow的div更改为窗口的中心：

$(document).ready(function() {
    mainWindowInCenter();
});

function mainWindowInCenter() {
    $('.mainWindow').css('position','fixed');
    $('.mainWindow').css("left", ($(window).width()/2-$('.mainWindow').width()/2) + "px");
    $('.mainWindow').css("top", ($(window).height()/2-$('.mainWindow').height()/2) + "px");
};

但只能运行一次，当我更改浏览器的窗口时，div会在脚本后保持相同的位置。

当窗口的尺寸发生变化时，我需要做什么才能改变它的位置？
我能以某种方式跟踪窗口的大小调整吗？例如：

$(document).ready(function() {
    if (window.size.isChange()) {
    mainWindowInCenter();
    };
});

Answer 1

您可以通过挂钩resize事件来调整窗口大小时调用您的函数：

$(window).on('resize', function() {
  mainWindowInCenter();
});

function mainWindowInCenter() {
  $('.mainWindow').css({
    position: 'fixed',
    left: $(window).width() / 2 - $('.mainWindow').width() / 2,
    top: $(window).height() / 2 - $('.mainWindow').height() / 2
  });
}

你也可以单独使用CSS来达到同样的效果，这样会更好。但是，这是否可能取决于您的HTML结构。

Answer 2

你不应该使用任何javascript。

如果你的元素是静态宽度/高度，你应该给它以下css：

.mainWindow {
    position: fixed;
    width: 500px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -100px; /* Negative half of height. */
    margin-left: -250px; /* Negative half of width. */
}

无论窗口事件如何，它都会居中，并且在绑定到resize事件时可以避免性能问题。

当窗口大小改变时如何更改元素的位置？

2 个答案: