Comment utiliser JavaScript pour obtenir l'effet de commutation coulissante de haut en bas des images et ajouter des animations de fondu d'entrée et de sortie ?

Comment utiliser JavaScript pour obtenir l'effet de commutation coulissante de haut en bas des images et ajouter des animations de fondu d'entrée et de sortie ?

Dans le développement Web, il est souvent nécessaire d'obtenir des effets de commutation d'image. Vous pouvez utiliser JavaScript pour réaliser une commutation coulissante de haut en bas et ajouter des effets d'animation de fondu d'entrée et de sortie.

Tout d'abord, nous avons besoin d'un conteneur contenant plusieurs images. Nous pouvons utiliser des balises div en HTML pour héberger des images. Par exemple, nous créons un div avec l'identifiant "image-container" pour contenir l'image.

<div id="image-container">
   <img src="image1.jpg">
   <img src="image2.jpg">
   <img src="image3.jpg">
</div>

Ensuite, nous devons écrire du code JavaScript pour obtenir l'effet de commutation. Ici, nous utilisons des écouteurs d'événements pour surveiller les événements de défilement de la souris et changer d'image en fonction de la direction de défilement.

var container = document.getElementById("image-container");
var images = container.getElementsByTagName("img");
var currentIndex = 0;
var imageHeight = images[currentIndex].height;

window.addEventListener("wheel", function(event){
   var deltaY = event.deltaY;
   
   // 滚轮向下滚动，切换至下一张图片
   if (deltaY > 0 && currentIndex < images.length - 1) {
      currentIndex++;
   }
   
   // 滚轮向上滚动，切换至上一张图片
   else if (deltaY < 0 && currentIndex > 0) {
      currentIndex--;
   }
   
   // 计算图片容器需要滚动的距离
   var scrollDistance = currentIndex * imageHeight;
   
   // 使用CSS的tranform属性实现滑动效果
   container.style.transform = "translateY(-" + scrollDistance + "px)";
   
   // 使用CSS的transition属性实现淡入淡出效果
   container.style.opacity = 0.5;
});

Dans le code ci-dessus, deltaY表示滚轮滚动的距离，currentIndex表示当前显示的图片索引，imageHeight représente la hauteur de chaque image. En écoutant l'événement de la roue, l'effet de commutation est obtenu en fonction du sens de roulement de la roue et de l'index d'image actuellement affiché. Ensuite, utilisez l'attribut CSS transform pour faire glisser le conteneur d'image de haut en bas jusqu'à la position correspondante, et utilisez l'attribut de transition pour définir la transparence afin d'obtenir un effet d'animation de fondu entrant et sortant.

En utilisation réelle, les styles pertinents peuvent être ajustés et optimisés en fonction des besoins.

Ce qui précède est un exemple de code d'utilisation de JavaScript pour obtenir l'effet de commutation coulissante de haut en bas d'une image et l'ajout d'une animation de fondu entrant et sortant. En écoutant l'événement de défilement de la souris, nous pouvons changer d'image en fonction du sens de défilement de la roue et utiliser la propriété transform de CSS pour obtenir l'effet de glissement, et la propriété de transition pour obtenir l'effet de fondu d'entrée et de sortie, rendant ainsi la commutation d'image plus fluide et plus vive.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!