当用户向下滚动时动态更改图像 | 2套

当用户使用 JavaScript 滚动时动态更改图像 |设置 1

可能存在需要根据用户输入动态更改图像的情况。在这种情况下，当用户向下滚动时。

方法：

• 设置滚动事件侦听器以了解用户已滚动页面。
• 计算用户垂直向上滚动的像素。它是通过使用 scrollTop 元素访问的。

  document.documentElement.scrollTop

• 使用该值动态更改图像的来源。

示例 1：在此示例中，每当页面垂直滚动 150 像素时，我们将更改图像的来源。该页面由图像和文本部分组成。它们通过内部 CSS 设置样式。

window.onscroll监听器会在用户每次滚动时调用一个函数。然后，调用的函数使用document.getElementById("myImage")选择图像， document.getElementById("myImage")在滚动像素超过 150 像素时更改图像的源路径。

  

    
    
        How to change image dynamically
        when user scrolls down?
    
      
    
        img {
            position: fixed;
            width: 30%;
        }
  
        .main-content {
            padding-left: 35%;
            height: 1000px;
        }
  
        h1,
        h3 {
            color: green;
        }
    

  

    
  
    
        GeeksforGeeks
        First Image Section
        
            Scroll past the below line 
            to see the change
        
        
        Second Image Section
        
            Scroll back up to see 
            the original image
        
    
  
    
        window.onscroll = function () {
            scrollFunction();
        };
  
        function scrollFunction() {
            var image = document.getElementById("myImage");
            if (document.documentElement.scrollTop > 150)
                image.src = 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
            else
                image.src = 
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png";
        }
    

  

输出：

示例 2：在此示例中，我们将根据用户向下滚动的程度动态更改图像的排列。该页面由四个图像组成，在页面底部有一个粘性位置。

滚动侦听器调用的函数动态地打乱图像的来源。这让我们对图像有一个旋转的外观。

  

    
    
        How to Change Image Dynamically when
        User Scrolls using JavaScript ?
    
  
    
        .main-content {
            height: 800px;
        }
  
        .footer {
            position: sticky;
            bottom: 0;
            background-color: white;
        }
  
        .footerRow::after {
            content: "";
            clear: both;
            display: table;
            position: sticky;
            bottom: 0;
            width: 100%;
        }
  
        .footerColumn {
            float: left;
            width: 25%;
            display: table;
            position: relative;
            margin: auto;
        }
  
        img {
            width: 100%;
        }
  
        h1,
        h3 {
            color: green;
        }
    

  

  
    
        GeeksforGeeks
        Section One
        Scroll here to see the change
        
        Section Two
        Scroll here to see the change
        
        Section Three
        Scroll here to see the change
        
        Section Four
        Scroll here to see the change
        
    
  
    
        
            
                
            
            
                
            
            
                
            
            
                
            
        
    
  
    
        window.onscroll = function () {
            scrollFunction();
        };
  
        function scrollFunction() {
            var imageSource1 = 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
            var imageSource2 = 
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png";
            var imageSource3 = 
"https://media.geeksforgeeks.org/wp-content/uploads/20200121120603/GeeksforGeeks30.png";
            var imageSource4 = 
"https://media.geeksforgeeks.org/wp-content/uploads/20191026152101/geeks_for_geeks.jpg";
  
            var image1 = document.getElementById("image1");
            var image2 = document.getElementById("image2");
            var image3 = document.getElementById("image3");
            var image4 = document.getElementById("image4");
            if (document.documentElement.scrollTop < 150) {
                image1.src = imageSource1;
                image2.src = imageSource2;
                image3.src = imageSource3;
                image4.src = imageSource4;
            } else if (
                document.documentElement.scrollTop < 250) {
                image1.src = imageSource2;
                image2.src = imageSource3;
                image3.src = imageSource4;
                image4.src = imageSource1;
            } else if (
                document.documentElement.scrollTop < 350) {
                image1.src = imageSource3;
                image2.src = imageSource4;
                image3.src = imageSource1;
                image4.src = imageSource2;
            } else {
                image1.src = imageSource4;
                image2.src = imageSource1;
                image3.src = imageSource2;
                image4.src = imageSource3;
            }
        }
    

  

输出：