隐藏溢出时，仅显示可见图像

Question

我有一个显示为图像的html结构。 当容器设置为隐藏溢出时，有什么方法可以使那些不完全可见的图像（最后一行）？ 我能够获取隐藏的图像。

Answer 1

您可以使用此自定义选择器来查找不会溢出其父元素的元素：

jQuery.extend(jQuery.expr[':'], {
    inparent: function(el) {
        var $el = $(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 visibleimg = $('#container > img:not(:inparent)');