3

このサイト: http://houston.aiga.org/

スライダーは全幅/ブラウザー ウィンドウのサイズによって可変ですが、各スライダー アイテムのタイトルは常にコンテンツに合わせてインデントされます。

これを設定してみました： http://jsfiddle.net/topiman/xS7vn/

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

関数は機能していますが、計算により、ウィンドウ サイズを小さくすると項目が大きくなりすぎ、大きくすると大きくなりすぎます。

作業スライダーの例の行は次のとおりです。

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

はどこextraSpaceですか$(window).width()

感謝して受け取ったヘルプ - 事前に感謝します

4

1 に答える 1

2

結局、幅を忘れたようです：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/を確認してください。

于 2013-04-08T07:59:49.337 に答える