Question

我基本上使用jQuery循环来制作横幅图像，其中我有一些尺寸数组的图像。我试图让图像垂直对齐中心到LI的高度。现在我有一些大致有效的东西，但是方式不好。

您可以在此处查看我的工作：

我的HTML：

<div id="slider">
    <ul class="slidah">
        <li><img src="img/slide1.jpg" alt=""></li>
        <li><img src="img/slide1.jpg" alt=""></li>
        <li><img src="img/slide1.jpg" alt=""></li>
        <li><img src="img/slide1.jpg" alt=""></li>
    </ul>
</div>

我的jQuery：

(function ($) {
    $.fn.vAlign = function(fn) {

        return this.each(

            function(i){

                var ah = $(this).height();
                var ph = $(this).parent().height();
                var mh = Math.ceil((ph-ah) / 2);
                $(this).css('margin-top', mh);
            });
    };
})(jQuery);

$('.slidah').cycle({
    after: function(){
        $(".slidah li img").vAlign();
    }
});

我的CSS：

#slider{
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.slidah{
    width: 100%;
    height: 200px;
}

.slidah li{
    width: 100%;
    height: 200px;
}

现在您可以看到，垂直对齐功能确实有效，但它会在循环发生后触发。我试过了before然而这不起作用。我需要一种方法在周期发生的同时重新启动事件吗？

Answer 1

我相信因为jquery .cycle（）正在做什么，你总是会以这种方式攻击问题而获得不稳定的结果。我的第一个想法是对jquery文件准备好的所有列表项进行计算，并在DOM加载后立即设置每个margin-tops。因此尝试用初始CSS来解决这个问题，而不是依赖于在/之前调用函数或者作为每个jquery .cycle调用的回调。

这种方法应该会产生更稳定的结果。生病了，看看我是否可以在少数人中找到一个小提琴。

编辑：这是您修改过的jquery working for me in a fiddle here，没有任何故障功能或其他问题，例如您提供的示例。享受

(function ($) {
    $.fn.vAlign = function(fn) {

        return this.each(

            function(i){

                var ah = $(this).height();
                var ph = $(this).parent().height();
                var mh = Math.ceil((ph-ah) / 2);
                $(this).css('margin-top', mh);
            });
    };
})(jQuery);


$(document).ready(function(){
    $(".slidah li img").vAlign();
});

$('.slidah').cycle({});

jQuery循环：垂直对齐li中的图像

1 个答案: