Получить изображение, которое находится в центре экрана

Question

У меня есть список изображений на: http://johanberntsson.se/dev/fotosida/

Что бы быть хорошим способом, чтобы получить атрибут данных из Thats изображения в настоящее время в центре экрана? Поместите невидимую линию в центр экрана и посмотрите, с каким изображением она сталкивается? Или у вас есть другие предложения?

Надеюсь, у вас возникнет идея, в противном случае плохо развита.

Спасибо!

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, так что я не уверен, если есть более эффективные методы, чтобы использовать, чтобы сделать это.

Кроме того, не то, что я не учитываю маржи/отступы между изображениями. Поэтому, если вы хотите сделать что-то вроде цветной рамки на центрированном изображении (без рамки на других), тогда будут моменты между изображениями, где изображение не будет иметь границы.