📌  相关文章
📜  当用户使用 JavaScript 滚动时如何动态更改图像?

📅  最后修改于: 2021-08-30 12:03:36             🧑  作者: Mango

我们将把这个功能添加到我们的网页中,这样每当用户向上滚动或向下滚动图像时,图像就会发生变化。我们只使用了 3 张图像,但它可以轻松扩展为多个图像。
我们将图像保持在彼此之上,这确保一次只能看到一个图像。当我们滚动时,我们减少当前图像的 z 坐标并增加新图像的 z 坐标。通过这样做,新图像覆盖了旧图像,它位于所有图像的顶部并变得可见。

  • HTML 代码:用于创建包含图像的基本结构。
html


 

    
    
        Change Image Dynamically
        when User Scrolls
    

 

GeeksforGeeks

A Computer Science Portal for Geeks     
                               
 


html


javascript


JavaScript


  

    
    
        Change image dynamically
        when user scrolls
    
     
    

  

    

GeeksforGeeks

          A Computer Science Portal for Geeks           
                               
             


  • CSS 代码: CSS 用于设计结构。位置属性是这里最重要的东西。它将使所有图像显示在彼此之上。

html


  • Javascript 代码:在本节中,我们将添加 JavaScript 代码来执行图像的滚动。

javascript


最终解决方案:在本节中,我们将结合以上三节。

JavaScript



  

    
    
        Change image dynamically
        when user scrolls
    
     
    

  

    

GeeksforGeeks

          A Computer Science Portal for Geeks           
                               
             

输出:

注意:上面的代码只有在鼠标悬停在图像上时才会改变图像。