3

我有一个包含元素设置为溢出隐藏，UL 溢出容器。我将如何获得可见的 li？

我的标记：

<div class="dm-similar-photos-content-container">
    <ul class="carousel" style="left: 0px;">
        <li class="dm-image">
            <img data-photoid="1" src="http://lorempixel.com/150/150/food/1">
        </li>

        <li class="dm-image">
            <img data-photoid="2" src="http://lorempixel.com/150/150/food/2">
        </li>

        <li class="dm-image">
            <img data-photoid="3" src="http://lorempixel.com/150/150/food/3">
        </li>

        <li class="dm-image">
            <img data-photoid="4" src="http://lorempixel.com/150/150/food/4">
        </li>

        <li class="dm-image">
            <img data-photoid="5" src="http://lorempixel.com/150/150/food/5">
        </li>

        <li class="dm-image">
            <img data-photoid="6" src="http://lorempixel.com/150/150/food/6">
        </li>

        <li class="dm-image">
            <img data-photoid="7" src="http://lorempixel.com/150/150/food/7">
        </li>

        <li class="dm-image">
            <img data-photoid="8" src="http://lorempixel.com/150/150/food/8">
        </li>

        <li class="dm-image">
            <img data-photoid="9" src="http://lorempixel.com/150/150/food/9">
        </li>

        <li class="dm-image">
            <img data-photoid="10" src="http://lorempixel.com/150/150/food/10">
        </li>

    </ul>
</div>


<div>
    <a class="left">
        <- Left
    </a>
    <a class="right">
        Right ->        
    </a>    
</div>

我的风格：

.dm-similar-photos-content-container {
    margin: 0 30px;
    overflow: hidden;
    width: 335px;
}
.carousel {
    margin: 0;
    padding: 0;
    position: relative;
    width: 9999px;
}
.dm-similar-photos-content-container .dm-image {
    margin: 13px 27px 13px 0;
}

.dm-image {
    float: left;
    list-style: none outside none;
    margin: 16px 16px 0 0;
    position: relative;
}


.dm-image img {
    border: 2px solid #7F8886;
}

最后是简单的左右JS：

jQuery('.left').on('click', function() {
    jQuery(".carousel").animate({
        left: "-=181"
    });
});

jQuery('.right').on('click', function() {
    jQuery(".carousel").animate({
        left: "+=181"
    });
});

你可以在这里看到它：http: //jsfiddle.net/GGhUF/

4

1 回答 1

1

一般的方法是判断元素是否位于其父元素的边界框内，这可以通过它们各自的宽度和偏移量来计算。合并所有这些的最佳方法是在单个自定义选择器中：

jQuery.extend(jQuery.expr[':'], {
    inparent: function(el) {
        parent = $(el).parent();
        if ($(el).offset().top >= parent.offset().top && 
            $(el).offset().top + $(el).outerHeight(true) <= parent.offset().top + parent.outerHeight(true) && 
            $(el).offset().left >= parent.offset().left && 
            $(el).offset().left + $(el).outerWidth(true) <= parent.offset().left + parent.outerWidth(true)) 
        {
            return true;
        }
        return false;
    }
});

然后你可以像这样使用它：

var visibleli = $('li:inparent');

这显然可以从一些优化中受益（在比较宽度等后提前退出），但我会让你解决这个问题。

这是一个演示：http: //jsfiddle.net/DDRYj/

于 2012-11-20T20:42:06.800 回答