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');

});

标题是绝对定位的，我使用顶部进行居中...

所以我的思维过程是，获取基本幻灯片图像的高度以保持其响应，减去当前标题的高度，并将其除以以最高值结尾的两个。

第一个实例正在使用“title-cap”，但接下来的三个不是。它们都返回相同的错误值。所有标题类都具有相同的属性，只是赋值不同。

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

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

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

现在还不确定为什么子帽没有正确加载。有什么想法吗？

Answer 1

在尝试获取隐藏元素的大小时，我遇到了类似的问题。我发现这很好jQuery actual plugin。这可能就是你所需要的。

jQuery变量高度

1 个答案: