我们将把这个功能添加到我们的网页中,这样每当用户向上滚动或向下滚动图像时,图像就会发生变化。我们只使用了 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
输出:
注意:上面的代码只有在鼠标悬停在图像上时才会改变图像。