我在一个页面上有一个图片列表。当我滚动页面时,我想在当前视口中的图像的导航栏中显示一些选项。因此,我需要获取当前视口中的图像元素,这是可能的吗?
雅各布
发布于 2013-01-11 14:33:05
谁说视口中只有一个图像?当有很多人的时候,你想做什么?
但除此之外,你总是可以通过图像获得容器的滚动位置以及图像的顶部偏移量,以查看当前显示的是哪一个。
所以这些值会让你得到你的结果
使用这些值可以定位视图中的所有图像,而不管它们是完全显示还是部分显示(在顶部或底部)。
这是一个简化的JSFiddle,它在第一个全景图像周围显示红色边框。该代码实现了以下功能:
// get top positions and references to all images
var pos = $("img").map(function(){
var $this = $(this);
return {
el: $this,
top: $this.offset().top
};
}).get();
// provide document scrolling
$(document).on("scroll", function() {
$("img").removeClass("first-in-view");
var scroll = $(this).scrollTop();
var i = 0;
while(pos[i].top < scroll) i++;
pos[i].el.addClass("first-in-view");
}).scroll();
这应该被优化为只在需要的时候切换类。否则我们会在每一个卷轴上闪烁。但它演示了如何做到这一点,你可以从这里开始。
重要
将图像位置确定过程附加到document load事件上是非常重要的,而不是通常使用DOM ready,因为您必须等待文档加载才能获得图像的最终位置。
https://stackoverflow.com/questions/14280232
复制相似问题