使用 jQuery 根据滚动位置递增图像 src

Question

我想使用 jQuery 使 div 的背景图像属性在用户每次滚动一定量（例如 30 像素）时增加 1。我有大约 40 张名为 frame1.jpg、frame2.jpg 等的图像。我通过为每个步骤设置条件（在 30 像素后显示第 1 帧，在 60 像素后显示第 2 帧等）成功地实现了这种效果，但是当我尝试使用 "for" 循环执行此操作时，一旦我滚动，它就会转到 frame3.jpg，最后一张之前的图像，然后在接下来的 30 像素之后跳到最后一张图像（frame4.jpg).

我实际上会在水平视差式布局中使用它，但我想先以最简单的方式了解该技术。

这是我尝试过的方法（只有 4 帧），如有任何帮助，我们将不胜感激。谢谢！

HTML:

<div id="container">
   <div id="inner"></div>
</div>

CSS:

#container {
  width: 100%;
  height: 2000px;
  position:absolute;
}

#inner { 
  position:fixed;
  top:0;
  width:100%;
  height:400px;
  background-size:cover;
}

Javascript:

$("#inner").css("background-image", "url(http://holis.ro/frames/frame1.jpg");

$(window).scroll(function() {
   var value = $(this).scrollTop();
    for (var i = 0; i < 4; i++) {
      if (value < 40 * i)
      $("#inner").css("background-image", "url(http://holis.ro/frames/frame" + i +".jpg)");
      else if (value < 40 * (i+1))
      $("#inner").css("background-image", "url(http://holis.ro/frames/frame" + (i+1) +".jpg)"); 
    }
});

Answer 1

找出 scrollTop() 值之间的关系。

而用户是：

var oldindex = 1;    
$(window).scroll(function() {

    //floor or ceil to get int valeu
    var newindex = Math.Math.ceil($(this).scrollTop()/ 30 ) //30 px

    if(newindex!=oldindex && newindex<=40){ //add limitation 40 images
        $("#inner").css("background-image", "url(http://holis.ro/frames/frame"+newindex+".jpg");
        oldindex = newindex
    }
});

使用 jQuery 根据滚动位置递增图像 src

Incrementing image src based on scroll position with jQuery

jquery

scroll

for-loop

src