获取位于屏幕中心的图像

Question

我有一个图片列表：http://johanberntsson.se/dev/fotosida/

从当前位于屏幕中心的图像中获取数据属性的好方法是什么？在屏幕中央放置一条不可见的线条，看看它碰撞的图像是什么？或者您还有其他建议吗？

希望你能得到这个想法，否则就会很复杂。

谢谢！

Answer 1

你可以这样做：

// finding the center point of the screen
// note that $(window).height() returns the height of the viewport
var center = Math.floor(($(window).height() / 2)) + $(window).scrollTop();

// looping through images and checking each for being in middle
$('.mainimages').each(function(i, img) { 
    var top = $(img).offset().top;
    if(top <= center && top + $(img).height() >= center) {
        // $(img) is in the center
    }
});

我不使用jQuery，所以我不确定是否有更好的方法可以用来做这个。

另外，不是我没有考虑图像之间的边距/填充。因此，如果您要做的事情就像在中心图像上放置彩色边框（在其他图像上没有边框）那么图像之间会有一些图像，其中没有图像会有边框。