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;

    });
});

新 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：

当元素和所有子元素都已完全加载时，加载事件将发送到该元素。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和窗口对象。

于 2012-12-14T01:04:45.697 回答