javascript - jQuery 可变高度

Question

我正在尝试创建一个图片库，其中的标题在幻灯片中垂直居中，这是我正在使用的代码

$(window).load(function() {

    var imageHeight = $('.flexslider .slides li img').height();

    var captionTop = imageHeight - $('.title-cap').height();
    var captionTop = captionTop/2;
    $('.title-cap').css('top',captionTop + 'px');

    var captionTopOne = imageHeight - $('.sub-cap-one').height();
    var captionTopOne = captionTopOne/2;
    $('.sub-cap-one').css('top',captionTopOne + 'px');

    var captionTopTwo = imageHeight - $('.sub-cap-two').height();
    var captionTopTwo = captionTopTwo/2;
    $('.sub-cap-two').css('top',captionTopTwo + 'px');

    var captionTopThr = imageHeight - $('.sub-cap-three').height();
    var captionTopThr = captionTopThr/2;
    $('.sub-cap-three').css('top',captionTopThr + 'px');

});

标题是绝对定位的，我用top做居中...

所以我的想法是，获取基本幻灯片图像的高度以保持其响应性，减去当前标题的高度，然后将其除以两个以最高值结尾。

第一个实例工作正常，带有“title-cap”，但接下来的三个不工作。它们都返回相同的错误值。所有字幕类都具有相同的属性，只是赋值不同。

此外，为了使值随浏览器窗口大小实时动态变化，我需要添加什么。

编辑: 好吧，做了一点研究，找出了加载/调整大小的部分。这就是我现在拥有的

function setContent(){
   [Added all of the above minus the onload part in here]
}
$(window).load(function() {
   setContent();
});
$(window).resize(function() {
   setContent();
});

现在只是不确定为什么 sub-cap 没有正确加载。有什么想法吗？

Answer 1

我在尝试获取隐藏元素的大小时遇到​​过类似的问题。我觉得这很好 jQuery actual plugin .这可能正是您所需要的。