向最靠近视口中心的图像添加一个类 [英] Add a class to the image closest to the center of the viewport

问题描述

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

On this page: [link-removed] I have a list of images and when you hover over each one it displays some info on the right, instead of triggering it on hover, how would i automatically trigger the image closest to the center of the screen so you can scroll down and the middle image will always the the selected image.

谢谢.

推荐答案

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

})

花了很多时间的人....基本上，我是根据元素相对于当前滚动位置的位置对返回的节点列表进行排序，然后在顶部结果上调用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()

})

说明

这是此功能过程的说明.简而言之，它通过排序确定哪个元素最接近当前滚动位置.它将滚动位置除以元素的物理位置，如果滚动位置等于元素位置，则结果(滚动位置除以元素位置)将为1.如果从1减去该值，则所需的数字将为0而不是一个.所有其他元素都将大于0或小于0.如果我们获得该元素的绝对值(使所有数字为正)，我们将获得一组正数，其中最接近的1等于最接近的0滚动位置. (例如，一组-4, -2, 1, 5, 7将变为4, 2, 1, 5, 7.然后可以将其排序为1, 2, 4, 5, 7.因此，-4比+5更接近于0并得到更高的排序).然后我们将其排序，最接近0的就是我们想要的那个.

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

|1 - (scrollX / elementX)|

然后我们对其进行排序

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

，我们只关心第一个元素(最接近0的元素)，它是排序数组中以[0]表示的第一项.

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].

最后，我们将该元素称为mouseover事件.

Lastly we call the mouseover event for that element.

对于过于复杂的解释，我们深表歉意.我想如果可以总结一下，我会说它采用滚动位置的x值并将其除以元素的x值.结果为1表示它们相等，因此值最接近的那个就是我们想要的那个.

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.

我们在这里所做的只是设置偏移量.如果我们将其保留在滚动位置，它将相对于屏幕顶部，但我们希望其相对于屏幕中间.因此，我们基于窗口滚动X +窗口高度($(window).scrollTop()+$(window).height()/2)的1/2进行计算.然后，对元素执行相同的操作，以便相对于元素的中间位置而不是元素的顶部(-$(a).height()/2)执行此操作.该部分将优先考虑到下一个元素的实际位置.

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

这篇关于向最靠近视口中心的图像添加一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！