javascript - 使用 jQuery/javascript 自动居中大于窗口的 div

Question

我在网站上制作宽度为 1920 像素的 div 自动居中时遇到了一些麻烦。现在我一直在使用这个 jQuery 代码在页面打开时自动将 div 居中：

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();

    var extra= 1920 - $(window).width(); 
    var extraleftside= extra/2;
    $("div#scroller").css("left", "-" + extraleftside + "px");
});
</script> 

但是那个代码只有在网站刷新时才会调整，有没有可能让它实时做到呢？

如果你想看到我想要的效果，和本站的滚动背景一样：http: //www.apps.no

LeGEC 很好地回答了这个问题，这段代码成功了：

    <script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();

    var extra= 1920 - $(window).width(); 
    var extraleftside= extra/2;
    $("div#scroller").css("left", "-" + extraleftside + "px");
}


);

$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
    var extra= 1920 - $(window).width(); 
    var extraleftside= extra/2;
    $("div#scroller").css("left", "-" + extraleftside + "px");
}
</script> 

Answer 1

你的意思是在resize上重新计算它？

function doResize(){
    var extra= 1920 - $(window).width(); 
    var extraleftside= extra/2;
    $("div#scroller").css("left", "-" + extraleftside + "px");
}

$(window).load(function(){
    // maybe the slider should also be updated on resize...
    $('#slider').nivoSlider();

    doResize();
});

$(function(){
    $(window).resize(doResize);
});