javascript - JQuery 在调整窗口大小时重新计算 css

Question

在这个网站上: http://houston.aiga.org/

虽然 slider 是全宽的/在浏览器窗口大小上可变，但每个 slider 项的标题总是缩进以与内容对齐。

我试过这样设置: http://jsfiddle.net/topiman/xS7vn/

$(window).resize(function() {
    $('#item').css("padding-left",$(window).width()/2);
});

该函数正在运行，但计算将项目在减小窗口大小时推得太远，在增加时推得太远。

工作 slider 示例中的行是:

$('.layout-feature .box-section-image-gallery-controls-title, .layout-feature .box-section-image-gallery-title').css('paddingLeft', 60 + extraSpace/2);

其中 extraSpace 是 $(window).width()

非常感谢收到的任何帮助 - 提前致谢

Answer 1

看来你毕竟忘记了宽度:http://jsfiddle.net/topiman/xS7vn/5/

这是我想出来的。愚蠢的事情是 console.log 一直返回 +8 差异，我不得不硬编码删除。这是您要找的吗？

$(window).resize(function() {
    var ItemWidth = $(".wrapper").width();
    $('#item').width( ItemWidth );
    var WindowWidth = $(window).width();
    // cannot resize because window is smaller than the wrapper
    if( ItemWidth > WindowWidth ) {
        var PadWidth = 0;
    } else {
        var PadWidth = (WindowWidth - ItemWidth)/2 - 8;
    }
    console.log( ItemWidth + " - " + WindowWidth + " - " + PadWidth );

    $('#item').css("margin-left",PadWidth + "px");
    });

更新；还要检查 http://jsfiddle.net/xS7vn/8/获取最新更新，包括调整页面加载大小。