Javascript:如何在滚动时更改 div 内的图像？

Question

所以我正在尝试创建在该网站上看到的效果(对于列左侧的照片): https://www.franshalsmuseum.nl/en/

我希望能够在 div 内滚动时更改图像。最好是，在滚动浏览所有图像之前，它不会向下滚动页面!

在添加 jQuery 之类的东西之前，我试图掌握 javascript 的窍门，所以有人可以使用 pureJS 来帮助解决这个问题吗？`

window.onscroll = function() {
    console.log(window.pageYOffset);
    var img1 = document.getElementById('img1');
    var img2 = document.getElemebtById('img2')
    if ( window.pageYOffset > 1000 ) {
        img1.classList.add("hidden");
        img2.classList.remove("hidden");
    } else {
        img2.classList.add("hidden");
        img1.classList.remove("hidden");
    }
}

.rightPhotos {
    max-width: 50%;
    height: 50%;
    overflow: auto;
}

.aPhoto {
    max-height: 100%;
}

.hidden {
    visibility: hidden;
}

.images {
    width: 100%;
    height: 100%;
}

      <div class="other">
          <div class="rightPhotos" onscroll="myFunction()">
              <div class="aPhoto">
                  <img class ="images" id="img1" src="IMAGES/sunglasses.jpeg"  alt="Woman with Sunglasses">
              </div>
              <div class="aPhoto hidden">
                  <img class="images" src="IMAGES/dancer1.jpg" alt="A Dancer">
              </div>
          </div>
      </div>

`

Answer 1

您链接的页面实际上看起来非常好，所以我花了一些时间来制作一些看起来比其他答案更接近它的东西。

• 我添加了一个正常工作的转换，类似于 franshalsmuseum.nl 上的转换。
• 我设计了页面样式以相对较好地处理调整大小:
  • Pane 和图像的大小都是相对的，
  • 滚动步数与页面高度相关，
  • 图像使用 <div> 显示与 background-image而不是 <img>标签。根据窗口的大小，它们会被稍微裁剪以适应不断变化的视口(viewport)纵横比。
• 我使图像集的数量非常容易改变。它可以通过在 Javascript 中创建 html 元素来改进，但这看起来没有必要。至少，它不会用于原始页面。

工作原理

HTML

图像被放入特殊的信封元素 ( .img-wrapper )，提供适当的大小和位置 position: relative那里很重要)。每个图像元素获取 url(作为背景图像 url)和 javascript 使用的图像集编号:

<div class="img visible" data-imageset="1"
    style="background-image: url('http://placeimg.com/640/480/people');">
</div>

可见类设置为在开头显示图像集 1。

CSS

关键点是这些定义(与 #bottom-image 类似)。由于包围图像的元素有 overflow: hidden ，我们可以通过将图像移到可见区域之外来隐藏图像。当我们将坐标设置回正常时，图像将使用平滑过渡向后滑动。

/* hiding images in #top-image */
#left-pane #top-image .img {
  top: 100%;
}
#left-pane #top-image .img.visible {
  top: 0;
}

JS

Javascript代码非常少，与DOM的交互真的是一行。但是，它使用了一些可能并不明显的技巧，因此这一行带有一些文档链接:

document . querySelectorAll ('#left-pane .img') . forEach ( (img) => {
img . classList . toggle ( 'visible' , img . dataset . imageset <= currentSet );

它只是找到所有图像并添加或删除类 visible取决于 data-imageset图片的属性。

带演示的完整代码段

请参阅下面的代码段。如果在运行代码段后使用“全页”链接，演示看起来会好得多。

let currentSet = 1;

function updateSelectedImgSet() {
  const currentScroll = document.scrollingElement.scrollTop;
  const scrollMax = document.scrollingElement.scrollHeight - document.scrollingElement.clientHeight;
  const setsCount = 3;
  const scrollPerSet = scrollMax / setsCount;
  const scrolledSet = Math.floor(currentScroll / scrollPerSet) + 1;
  if (scrolledSet == currentSet) {
    return;
  }
  currentSet = scrolledSet;
  document.querySelectorAll('#left-pane .img').forEach((img) => {
    img.classList.toggle('visible', img.dataset.imageset <= currentSet);
  });
}

window.onscroll = updateSelectedImgSet;
window.onresize = updateSelectedImgSet;

/* Left pane, fixed */
#left-pane {
  position: fixed;
  height: 100%;
  width: 40vw;
}

#left-pane .img-wrapper {
  position: relative;
  height: 50%;
  width: 100%;
  overflow: hidden;
}

#left-pane .img-wrapper .img {
  position: absolute;
  width: 100%;
  height: 100%;
  /* Sizing and cropping of image */
  background-position: center;
  background-size: cover;
  /* Transition - the slow sliding of images */
  transition: 0.5s all ease-in-out;
}

/* hiding images in #top-image */
#left-pane #top-image .img {
  top: 100%;
}
#left-pane #top-image .img.visible {
  top: 0;
}

/* hiding images in #bottom-image */
#left-pane #bottom-image .img {
  bottom: 100%;
}
#left-pane #bottom-image .img.visible {
  bottom: 0;
}

/* Right pane, scrolling with the page */

#right-pane {
  margin-left: 40vw;
}

.scrollable-content {
  font-size: 40vw;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

<div id="left-pane">
  <div id="top-image" class="img-wrapper">
    <div class="img visible" data-imageset="1"
        style="background-image: url('http://placeimg.com/640/480/people');">
    </div>
    <div class="img" data-imageset="2"
        style="background-image: url('http://placeimg.com/640/480/animals');">
    </div>
    <div class="img" data-imageset="3"
        style="background-image: url('http://placeimg.com/640/480/any');">
    </div>
  </div>
  <div id="bottom-image" class="img-wrapper">
    <div class="img visible" data-imageset="1"
        style="background-image: url('http://placeimg.com/640/480/nature');">
    </div>
    <div class="img" data-imageset="2"
        style="background-image: url('http://placeimg.com/640/480/tech');">
    </div>
    <div class="img" data-imageset="3"
        style="background-image: url('http://placeimg.com/640/480/arch');">
    </div>
  </div>
</div>
<div id="right-pane">
  <div class="scrollable-content">Scrollable content!</div>
</div>