jquery - 当溢出隐藏时仅获取可见图像

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