0

我基本上使用 jQuery 循环来处理横幅图像，其中我有一系列大小的图像。我试图让图像垂直对齐到 LI 的高度。现在我得到了一些大致有效的东西，但方式很糟糕。

你可以在这里查看我的工作：

http://jsfiddle.net/X4GQC/

我的 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了，但这没有用。我需要一种方法在循环发生的同时重新触发事件？

4

1 回答 1

2

我相信由于 jquery .cycle() 正在做的事情，你总是会得到以这种方式攻击问题的不稳定结果。我的第一个想法是对 jquery 文档上的所有列表项进行计算，并在 DOM 加载后立即设置它们的每个边距顶部。因此尝试使用初始 CSS 解决此问题，而不是依赖于 / before / 调用函数或作为每个 jquery .cycle 调用的回调。

这种方法应该会产生更稳定的结果。生病看看我能不能得到一个小提琴在几个。

编辑：这是您修改后的 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);


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

$('.slidah').cycle({});
于 2013-05-20T16:37:13.427 回答