Question

好的，因此我在页面上滚动了一个给定的数量后，想要在页面上换一张图像。

例如，假设我有图像X，并且当用户在页面上向下滚动100像素时，我想将图像更改为图像Y。我该怎么做呢？

例如，让我们使用它：
可以说imageX.jpg是页面上加载的图像，可以说imageY.jpg是我要转换到的图像。

<html>
<body>
    <img src = "imageX.jpg" />
    <div>
        <p>
            A bunch of page text that goes on forever.
        </p>
    </div>
</body>
</html>

Answer 1

这里是实现目标的一种方法示例。请注意，超时用于限制滚动。下划线或lodash中可以找到更细粒度的实现。

编辑：您对问题的反对意见是因为您根本没有做出任何努力来实现这一目标。我对此有疑问的好处是您不知道从哪里开始。

var img1 = 'https://svgshare.com/i/9Rx.svg';
var img2 = 'https://svgshare.com/i/9SP.svg';
var img = document.querySelector('img');

document.addEventListener('scroll', (e) => {
  e.preventDefault();
  setTimeout(() => {
    img.src = window.scrollY > 100 ? img2 : img1;
  }, 500);
});

img.src = img1;

img {
  position: fixed;
}

<html>

<body>
  <img width="200" />
  <div>
    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

    <p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p><p>A bunch of page text that goes on forever.</p>

  </div>
</body>

</html>

如何基于评分更改图像？

1 个答案: