Question

我正在尝试实现一个更改图像的脚本＆＃34;每次＆＃34;用户向下滚动。

我阅读了一些内容，我认为最佳做法是在用户到达特定滚动位置时替换图像。

该网站将有3个主要部分： 1）介绍：核心消息+＆＃34;指令＆＃34;使用; 2）动画：当用户向下滚动时，动画将显示。因此，每10个像素（或更多/更少）图像会发生变化，但用户会看到相同的部分。它是一种GIF，用户可以控制时间。它是有用的，以便让用户能够看到每个图纸（或者如果他们不想看到所有图纸，就更快）。 3）结论：最后的消息+我的联系。

每个部分都有＆＃34; 100％的设备高度＆＃34;和＆＃34; 100％的设备长度＆＃34; （每个设备都有自己的尺寸）。这些数字对于让您了解非常有用。

换句话说，＆＃34;动画＆＃34;将遵循这条道路： 1）0像素的第一图像（例如，从顶部开始）; 2）以10像素（例如从顶部）取代第一个像素的第二图像; 3）以20像素（例如从顶部）替换第二图像的第三图像; 4）以30像素（例如从顶部）取代第三像素的第四图像; ECC。

您知道实现此脚本的方法吗？

Answer 1

每次页面滚动时我会触发一个事件，然后获取目标元素顶部的位置，然后在那里做我的逻辑。这是一个代码示例：

// can be any target
$(body).scroll( function () {
  // your even fired on scroll - get the offset of the closet parent element
  // you will likely loop here
  var position = $("elementYouWantToGetOffSetFor").position(); 
  if(position.Top >= previousElementsTop) // guessing you need to check it against closest sibling
{ 
  // then do your image swap here 
  $("yourtargetimage").src("pathtowherethisis");
}
});

根据滚动位置

1 个答案: