一类图像最接近添加到视口的中心(Add a class to the image closest t

在此页：[链接删除]我有一个图像列表，当你将鼠标悬停在每一个它会在右侧显示一些信息，而不是触发它悬停，如何将我自动最接近的图像触发到的中心屏幕，您可以向下滚动和中间图像总是将选定的图像。

谢谢。

Answer 1:

$(window).scroll(function(){

    $($(".portfolio img").sort(function(a,b){
      return Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(a).height()/2) / $(a).position().top)) - 
             Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(b).height()/2) / $(b).position().top))
    })[0]).mouseover()

})

人是没完没了....基本上我排序基于相对于当前滚动位置元素的位置上返回的节点列表，然后调用在顶部结果鼠标悬停。

和另一种方法（不同的位置，它突出显示它）

$(window).scroll(function(){

    $($(".portfolio img").sort(function(a,b){
      return Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(a).height()) / $(a).position().top)) - 
             Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(b).height()) / $(b).position().top))
    })[0]).mouseover()

})

说明

下面是这个函数的过程的解释。简言之它确定哪个元件是由一种最接近当前的滚动位置。它把由元素的物理位置上的滚动位置，并且如果所述滚动位置等于元件位置，则结果（滚动位置由元件位置处分割）将是1，如果您减去从如图1所示，所希望的数量将是0而不是一个。所有其他元素将是要么比小于等于0大于0。然后如果我们得到的这个绝对值（使所有的数字为正），我们将有一组与最接近的一个正数为0是最接近滚动位置。（例如一组-4, -2, 1, 5, 7将成为4, 2, 1, 5, 7 ，这可以接着进行排序，以1, 2, 4, 5, 7 ，因此-4更接近0比+5和被排序更高）。然后，我们只是排序并最接近0的一个是我们想要的。

因此，我们得到这个公式

| 1 - （scrollX / elementX）|

那么，我们对它进行排序

Array.sort(function(a,b){return a - b}); // simple sort method

我们只关心的第一个元素（最近的一个为0），这是所表示通过排序后的数组中的第一项[0]

最后，我们呼吁该元素的鼠标悬停事件。

简要说明：P

很抱歉的过于复杂的解释。我想，如果我能总结一下吧，我会说这需要滚动位置的x值和元素的x值除以它。结果1将意味着他们是平等的，所以一个与最接近的值就是我们想要的。

的/ 2和这样的意思

所有我们这里做的是设置一个偏移量。如果我们在滚动位置离开它，这将是相对于屏幕的顶部，但我们希望它相对于中间。因此，我们计算基于窗口的窗口高度的scrollX + 1/2（上$(window).scrollTop()+$(window).height()/2 ）。然后我们做同样的元素，使我们做到这一点相对于元素的中间，而不是它的顶部（ -$(a).height()/2 ）。这部分是所有偏好的地方，它实际上进入到下一个元素。

很抱歉的令人费解的解释......这是真的很难解释，甚至对自己

Answer 2:

你有没有考虑使用旋转木马组件？

看一看这个http://www.professorcloud.com/mainsite/carousel.htm