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

发布于 2024-12-03 10:08:49 字数 125 浏览 1 评论 0 原文

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

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

╰ゝ天使的微笑 2024-12-10 10:08:49

$(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 比 +5 更接近 0，并且排序得更高）。然后我们对它进行排序，最接近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）执行此操作。这部分是关于它实际转到下一个元素的位置的所有偏好。

抱歉，解释很复杂......真的很难解释甚至对我自己

$(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()

})

man that took forever.... basically I'm sorting the returned node list based on the element's position relative to the current scroll position and then call mouseover on the top result.

and an alternative approach (different position that it highlights it)

$(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()

})

Explanation

Here's an explanation of the process of this function. In brief it determines which element is closest to the current scroll position by a sort. It divides the scroll position by the element's physical position, and if the scroll position is equal to the element position, the result (scroll position divided by element position) will be 1. if you subtract that from 1, the desired number will be 0 instead of one. All the other elements will be either greater than 0 or less than 0. If we then get the absolute value of this (make all the numbers positive), we will have a set of positive numbers with the closest one to 0 being the closest to the scroll position. (e.g. a set of -4, -2, 1, 5, 7 will become 4, 2, 1, 5, 7. This can then be sorted to 1, 2, 4, 5, 7. Thus -4 is closer to 0 than +5 and gets sorted higher). Then we just sort it and the one closest to 0 is the one we want.

thus we get this formula

|1 - (scrollX / elementX)|

then we sort it

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

and we care only about the first element (one closest to 0), which is the first item in the sorted array as denoted by [0].

Lastly we call the mouseover event for that element.

Brief Explanation :P

Sorry for the overly complicated explanation. I guess if I could summarize it, I would say it takes the x value of the scroll position and divides it by the x values of the elements. a result of 1 would mean they are equal, so the one with a value closest to that is the one we want.

Meaning of the /2 and such

All we are doing here is setting an offset. if we leave it at the scroll position, it will be relative to the top of the screen, but we want it relative to the middle. Thus we calculate based on the window scrollX + 1/2 of the window height ($(window).scrollTop()+$(window).height()/2). Then we do the same for the element so that we do this relative to the middle of the element rather than the top of it (-$(a).height()/2). That part's all preference as to where it actually goes to the next element.

Sorry for the convoluted explanation... it is really hard to explain even to myself

回复收藏 0 原文