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上的转换。
我将页面设置为相对较好地处理调整大小：
- 窗格和图像的大小是完全相关的，
- 滚动步骤与页面高度相关，
- 使用<div>并background-image代替<img>代码显示图片。根据窗口的大小，它们会略微裁剪，以适应视口的宽高比变化。
我使图像集的数量变得非常简单。可以通过在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 <= {{1} }）;
}

它只会查找所有图片，并根据图片的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;
}

Answer 2

请参阅下面的代码： com.androidmapsextensions.GoogleMap map; map.setClustering(new ClusteringSettings().enabled(false).addMarkersDynamically(true));

我使用一个 (I set 60 insteed 1000 (in function)for see changes)和image更改了图片的onscroll

src

window.onscroll = function() {
    var img1 = document.getElementById('img1');
    var img2 = document.getElementById('img2')
    if ( window.pageYOffset > 60 ) {
 document.getElementById("img1").src = "https://material.angular.io/assets/img/examples/shiba2.jpg";
    } else {
 document.getElementById("img1").src = "https://material.angular.io/assets/img/examples/shiba1.jpg";
    }
}

.rightPhotos
{
    max-width: 50%;
    height:50%;

    overflow: auto;
}
.aPhoto
{

    max-height: 100%;


}



.images
{
    width: 100%;
    height: 500px;
}

Answer 3

您可以使用CSS属性来显示/隐藏元素;而不是具有隐藏类的自定义CSS。

if ( window.pageYOffset > 1000 ) {
        img1.style.visibility = 'hidden';  
        img2.style.visibility = 'visible';  
    } else {
        img2.style.visibility = 'hidden';  
        img1.style.visibility = 'visible';  
}

上面会隐藏元素，但DOM元素仍会占用空间。

现在它占用空间（比如删除它）

if ( window.pageYOffset > 1000 ) {
        img1.style.display = 'none';
        img2.style.display = 'block';
    } else {
        img1.style.display = 'block';
        img2.style.display = 'none'; 
}

Answer 4

//window.pageYOffset

var scrollingDiv = document.getElementById('scrollContainer');
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');

  scrollingDiv.onscroll = function(event) {

  if (scrollingDiv.scrollTop < 500) {
    img1.src = "https://placeimg.com/250/100/arch";
    img2.src = "https://placeimg.com/250/100/animals";
  }
  
  if (scrollingDiv.scrollTop > 500) {
    img1.src = "https://placeimg.com/250/100/nature";
    img2.src = "https://placeimg.com/250/100/people";
  }
  if (scrollingDiv.scrollTop > 1000) {
    img1.src = "https://placeimg.com/250/100/tech";
    img2.src = "https://placeimg.com/250/100/any";
  }
 
  
}

.container{
  display: table;
  width: 100%;
  height: 100%;
 }
 body{
 margin: 0;
 }
.container > div {
  vertical-align:top;
 }
 .left, .middle, .right {
   display: table-cell;
   height: 100vh;
   box-sizing: border-box;
   
 }
 .left, .right{
   width:40%;
   background: gray;
 }
 
 .middle{
   overflow: auto;
   position: relative;
 }
 
 .in-middle{
   background: tomato;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
 }
 .in-in-middle{
   height: 500px;
   background: tomato;
 }
 
 .in-in-middle:nth-child(2){
  background: pink;
 }
 
 .in-in-middle:nth-child(3){
  background: skyblue;
 }
 
 .left img{
  width: 100%;
  transition: all 0.5s;
 }

<div class="container">
  <div class="left">
    <img id="img1" src="https://placeimg.com/250/100/arch">
    <img id="img2" src="https://placeimg.com/250/100/animals">
  </div>
  <div class="middle" id="scrollContainer">
    <div class="in-middle">
      <div class="in-in-middle" id="1"></div>
      <div class="in-in-middle" id="2"></div>
      <div class="in-in-middle" id="3"></div>
    </div>
  </div>
</div>

Javascript：如何在滚动中更改div内的图像？

4 个答案:

如何运作