jquery - 使用 jQuery 根据滚动位置增加图像 src

Question

我想使用 jQuery 使 div 的背景图像属性在每次用户滚动一定量(例如 30 像素)时增加 1。我有大约40张名为frame1.jpg、frame2.jpg等的图像。我通过为每个步骤设置一个条件(在30像素后显示frame1，在60像素后显示frame 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
    }
});