时间戳

首页 > 解决方案 > 如何根据 scolling 更改图像？

javascript - 如何根据 scolling 更改图像？

问题描述

好的，所以我在页面上有一个图像，我想在页面滚动给定数量后更改它。

例如，假设我有图像 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>

标签： javascriptcss

解决方案

以下是实现目标的一种方法示例。请注意，超时用于限制滚动。可以在下划线或 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>

推荐阅读