Question

所以对于最后几天天，我正在努力让这个工作。尽管一些SO成员已经帮助了我很多，但我仍然觉得我走错了路，因为我无法让它发挥作用。

这是Fiddle。

基本上，我想根据滚动位置动态地将.show类添加/删除到.container内的图像。在发布的示例中，我只是尝试向下滚动。
如果你滚动得很轻，慢慢地看到它确实有效，但速度太快 - 那就是问题我的想法是定义类似于阈值的东西，必须在某些事情发生之前滚动，但不知何故我没有得到理想的结果。

此外，scroll事件似乎在浏览器中不常触发，因此我不知道如何使用它进行平滑的移动/转换。我已经看过教程中的一些示例代码，并且似乎总是有用！为什么不用我的例子呢？它与我的CSS有关吗？

请帮助我，我现在真的很沮丧。

例如，选择that tutorial page并查看来源。有一个名为ScrollCount的变量，每次运行该函数时都会递增。当ScrollCount达到3时，一些动画内容完成，ScrollCount重置为1.这样，根据评论，每三个像素滚动一下，鸟的翅膀就会改变。

但是根据我的代码的观察结果，这不可能是真的，因为触发函数的scroll事件似乎或多或少地随机发生 - 滚动得越快，越多像素被“跳过” “ - 至少我的代码，所以有些事情是错误的。

Answer 1

将动画元素与滚动事件的数量联系起来会产生不一致的结果。在样本page you linked上，动画与绝对滚动位置和滚动事件数量相关联，这可能会产生一些奇怪的结果。

滚动视图有很多种不同的方法，所有这些方法都会产生不同数量的滚动事件和滚动距离。

鼠标滚轮（受系统鼠标设置，鼠标分辨率影响）
键盘上下键（受系统键重复率影响）
上下翻页（可能会受到其他一些设置的影响？）
拖动滚动条（受各种事物影响）

然后根据浏览器，所有这些行为可能会有所不同。

总之？将动画绑定到滚动事件的数量对我来说听起来不错。相反，为什么不把它绑在滚动位置？

function animateHorse() {
    var currentScrollPosition = window.pageYOffset;
    var imageIndex = Math.round(currentScrollPosition / scrollResolution);

    if (imageIndex >= pictureCount) {
        imageIndex = pictureCount - 1; // Select last image
    }

    $("#container img").hide();
    $("#container img").eq(imageIndex).show();
}

And here's the fiddle.

Answer 2

这是工作演示，你可以看到马动画......

＆＃13;

onload = function startAnimation() {
  var frames = document.getElementById("animation").children;
  var frameCount = frames.length;
  var i = 0;
  setInterval(function() {
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
  }, 100);
}

＆＃13;

#animation img {
  display: none;
}
#animation img:first-child {
  display: block;
}

＆＃13;

<div id="animation">
  <img src="http://s23.postimage.org/t57meexkb/horse_1.png" class="animated" />
  <img src="http://s23.postimage.org/i86apnasr/horse_2.png" class="animated" />
  <img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png" class="animated" />
  <img src="http://s23.postimage.org/w4ej1j71n/horse_4.png" class="animated" />
  <img src="http://s23.postimage.org/ddclrdch7/horse_5.png" class="animated" />
  <img src="http://s23.postimage.org/nbxkdulwr/horse_6.png" class="animated" />
  <img src="http://s23.postimage.org/phrv8cpd7/horse_7.png" class="animated" />
  <img src="http://s23.postimage.org/n1un88wob/horse_8.png" class="animated" />
  <img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png" class="animated" />
  <img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png" class="animated" />
  <img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png" class="animated" />
  <img src="http://s23.postimage.org/bhuetyd0r/horse_12.png" class="animated" />
  <img src="http://s23.postimage.org/imc82zka3/horse_13.png" class="animated" />
  <img src="http://s23.postimage.org/auvi4fg4r/horse_14.png" class="animated" />
</div>

＆＃13;

http://jsfiddle.net/u20yvyp9/

jQuery：动画序列图像

2 个答案: