Question

在此页面上：[link-removed]我有一个图像列表，当您将鼠标悬停在每个图像上时，它会在右侧显示一些信息，而不是在悬停时触发它，我将如何自动触发最接近图像的图像屏幕中心，以便您可以向下滚动，中间的图像将始终是所选图像。

感谢。

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]表示。

最后，我们为该元素调用mouseover事件。

简要说明：P

对于过于复杂的解释感到抱歉。我想如果我可以总结它，我会说它采用滚动位置的x值并将其除以元素的x值。 1的结果意味着它们是相等的，所以具有最接近的值的那个是我们想要的那个。

/ 2等的含义

我们在这里所做的就是设置偏移量。如果我们将它留在滚动位置，它将相对于屏幕顶部，但我们希望它相对于中间。因此，我们根据窗口高度（$(window).scrollTop()+$(window).height()/2）的窗口scrollX + 1/2计算。然后我们对元素执行相同操作，以便我们相对于元素的中间而不是顶部（-$(a).height()/2）执行此操作。那部分是关于它实际进入下一个元素的所有偏好。

对于令人费解的解释感到抱歉......很难解释even to myself

Answer 2

您是否考虑过使用轮播组件？

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

将类添加到最靠近视口中心的图像

2 个答案:

说明

简要说明：P

/ 2等的含义