Как изменить изображение динамически, когда пользователь прокручивает с помощью JavaScript?
Опубликовано: 5 Января, 2022
Мы собираемся добавить функциональность на нашу веб-страницу, чтобы всякий раз, когда пользователь прокручивает изображение вверх или вниз, оно менялось. Мы использовали только 3 изображения, но его можно легко расширить для нескольких изображений.
Мы храним изображения друг над другом, чтобы одновременно было видно только одно изображение. Когда мы прокручиваем, мы уменьшаем координату z текущего изображения и увеличиваем координату z нового изображения. При этом новое изображение накладывается на старое, появляется поверх всех изображений и становится видимым.
- HTML-код: используется для создания базовой структуры, включающей изображения.
html
<!DOCTYPE html>< html >< head > < meta charset = "utf-8" /> < title > Change Image Dynamically when User Scrolls </ title ></ head >< body >< h1 >GeeksforGeeks</ h1 >< b >A Computer Science Portal for Geeks</ b > < div id = "scroll-image" > < img src = "CSS.png" class = "test" /> < img src = "html.png" class = "test" /> < img src = "php.png" class = "test" /> </ div ></ body ></ html > |
- Код CSS: CSS используется для проектирования структуры. Свойство position - это здесь самое главное. Все изображения будут отображаться друг на друге.
html
< style > body { text-align: center; } h1 { color: green; } img { position: absolute; left: 300px; }</ style > |
- Код Javascript: в этом разделе мы добавим код JavaScript для прокрутки изображения.
javascript
<script> window.onload = function () { // Index of current image // which is on display var imageIndex = 0; // Object array of all the // images of class test var images = document.getElementsByClassName( 'test' ); // This tells us if mouse if over // image or not, We only change // image if mouse if over it var isMouseOverImage = false ; // Object of parent element // containing all images var scrollImages = document.getElementById( 'scroll-image' ); // Stores the current scoll co-ordinates // so that the window don't scroll down // while scrolling the images var x, y; // This function sets the scroll to x, y function noScroll() { window.scrollTo(x, y); } // The following event id fired once when // We hover mouse over the images scrollImages.addEventListener( "mouseenter" , function () { // We store the current page // offset to x,y x = window.pageXOffset; y = window.pageYOffset; // We add the following event to // window object, so if we scroll // down after mouse is over the // image we can avoid scrolling // the window window.addEventListener( "scroll" , noScroll); // We set isMouseOverImage to // true, this means Mouse is // now over the image isMouseOverImage = true ; }); // The following function is fired // when mouse is no longer over // the images scrollImages.addEventListener( "mouseleave" , function () { // We set isMouseOverImage to // false, this means mouse is // not over the image isMouseOverImage = false ; // We remove the event we previously // added because we are no longer // over the image, the scroll will // now scroll the window window.removeEventListener( "scroll" , noScroll); }); // The following function is called // when we move mouse wheel over // the images scrollImages.addEventListener( "wheel" , function (e) { // We check if we are over // image or not if (isMouseOverImage) { var nextImageIndex; // The following condition // finds the next image // index depending if we // scroll up or scroll down if (e.deltaY > 0) nextImageIndex = (imageIndex + 1) % images.length; else nextImageIndex = (imageIndex - 1 + images.length) % images.length; // We set the z index of current // image to 0 images[imageIndex].style.zIndex = "0" ; // We set the z index of next // image to 1, this makes // The new image appear on top // of old image images[nextImageIndex].style.zIndex = "1" ; imageIndex = nextImageIndex; } }); }</script> |
Окончательное решение: в этом разделе мы объединим три вышеупомянутых раздела.
JavaScript
<!DOCTYPE html><html> <head> <meta charset= "utf-8" /> <title> Change image dynamically when user scrolls </title> <style> body { text-align: center; } h1 { color: green; } img { position: absolute; left: 300px; } </style></head> <body> <h1>GeeksforGeeks</h1> <b>A Computer Science Portal for Geeks</b> <div id= "scroll-image" > <img src= "CSS.png" class= "test" /> <img src= "html.png" class= "test" /> <img src= "php.png" class= "test" /> </div> <script> window.onload = function () { // Index of current image // which is on display var imageIndex = 0; // Object array of all the // images of class test var images = document.getElementsByClassName( 'test' ); // This tells us if mouse if over // image or not, We only change // image if mouse if over it var isMouseOverImage = false ; // Object of parent element // containing all images var scrollImages = document.getElementById( 'scroll-image' ); // Stores the current scoll co-ordinates // so that the window don't scroll down // while scrolling the images var x, y; // This function sets the scroll to x, y function noScroll() { window.scrollTo(x, y); } // The following event id fired once when // We hover mouse over the images scrollImages.addEventListener( "mouseenter" , function () { // We store the current page // offset to x,y x = window.pageXOffset; y = window.pageYOffset; // We add the following event to // window object, so if we scroll // down after mouse is over the // image we can avoid scrolling // the window window.addEventListener( "scroll" , noScroll); // We set isMouseOverImage to // true, this means Mouse is // now over the image isMouseOverImage = true ; }); // The following function is fired // when mouse is no longer over // the images scrollImages.addEventListener( "mouseleave" , function () { // We set isMouseOverImage to // false, this means mouse is // not over the image isMouseOverImage = false ; // We remove the event we previously // added because we are no longer // over the image, the scroll will // now scroll the window window.removeEventListener( "scroll" , noScroll); }); // The following function is called // when we move mouse wheel over // the images scrollImages.addEventListener( "wheel" , function (e) { // We check if we are over // image or not if (isMouseOverImage) { var nextImageIndex; // The following condition // finds the next image // index depending if we // scroll up or scroll down if (e.deltaY > 0) nextImageIndex = (imageIndex + 1) % images.length; else nextImageIndex = (imageIndex - 1 + images.length) % images.length; // We set the z index of current // image to 0 images[imageIndex].style.zIndex = "0" ; // We set the z index of next // image to 1, this makes // The new image appear on top // of old image images[nextImageIndex].style.zIndex = "1" ; imageIndex = nextImageIndex; } }); } </script></body> </html> |
Выход:
Примечание. Приведенный выше код изменит изображение только при наведении указателя мыши на изображение.