1

ホームページに回転するスライドショーがあり、画像の高さからタイトルの高さを引いたものから矢印の高さを引いたものに基づいてコンテンツの高さを設定したいと思います。何らかの理由で、タイトルまたは画像の高さが0以外として返されていません。

ここを参照してください：http ：//www.keganquimby.com/lumina/

抜粋（画像の横にあるタイトルの下のコンテンツ）は、画像の高さが十分でない場合に矢印に切り替わるため、画像の高さに基づいてCSSで設定したいと思います。

私のjs：

jQuery(document).ready(function($){
$('.slides .slide').each(function(){

    var slideHeight = $(this).height();
    var headerHeight = $('.slide-content header').height();
    var arrowHeight = $('.flex-direction-nav').height();

    var contentHeight = slideHeight - headerHeight - arrowHeight;

    });
});

NEW JS（高さを設定し、他の高さの呼び出しを各ループの外側にプルするように編集）：

jQuery(window).load(function($){

var slideHeight = $(this).height();
var headerHeight = $('.slide-content header').height();
var arrowHeight = $('.flex-direction-nav').height();

$('.slides .slide').each(function(){

    var contentHeight = slideHeight - headerHeight - arrowHeight;
    $('footer.post-more').css('height', contentHeight + 'px');

    });
});
4

1 に答える 1

2

高さを測定する前に、画像が読み込まれるのを待つ必要があります。DOM の準備ができているからといって、画像が読み込まれているわけではないことに注意してください。代わりにこれを試してください：

jQuery(window).load(function($){
    var headerHeight = $('.slide-content header').height(),
        arrowHeight = $('.flex-direction-nav').height();

    var imgHeights = $('.slides .slide').map(function() {
        return $(this).height() - headerHeight - arrowHeight;
    });
});

jQuery.loadから:

load イベントは、要素とすべてのサブ要素が完全に読み込まれると、要素に送信されます。このイベントは、URL に関連付けられた任意の要素 (画像、スクリプト、フレーム、iframe、および window オブジェクト) に送信できます。

于 2012-12-14T01:04:45.697 に答える