Comment utiliser JavaScript pour obtenir l'effet de commutation coulissante de haut en bas des images tout en ajoutant des animations de zoom et de fondu ?-js tutoriel-php.cn

Comment utiliser JavaScript pour obtenir l'effet de commutation coulissante de haut en bas des images tout en ajoutant des animations de zoom et de fondu ?

PHPz

Libérer： 2023-10-20 17:15:11

original

1056 Les gens l'ont consulté

JavaScript 如何实现图片的上下滑动切换效果同时加入缩放和淡入淡出动画？

JavaScript Comment obtenir l'effet de commutation coulissante de haut en bas des images tout en ajoutant des animations de zoom et de fondu ?

Dans la conception Web, les effets de changement d'image sont souvent utilisés pour améliorer l'expérience utilisateur. Parmi ces effets de commutation, les animations de glissement de haut en bas, de zoom et de fondu sont relativement courantes et attrayantes. Cet article explique comment utiliser JavaScript pour réaliser la combinaison de ces trois effets d'animation.

Tout d'abord, nous devons utiliser HTML pour créer une structure de page Web de base, qui contient les éléments d'image à afficher. Voici un exemple de code HTML :

<!DOCTYPE html>
<html>
<head>
  <title>图片切换效果</title>
  <style>
    .container {
      position: relative;
      width: 500px;
      height: 300px;
      overflow: hidden;
    }
    
    .slide {
      position: absolute;
      display: none;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="slide" src="image1.jpg">
    <img class="slide" src="image2.jpg">
    <img class="slide" src="image3.jpg">
  </div>
  
  <script src="main.js"></script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous utilisons un conteneur div contenant trois éléments d'image, chacun ayant la classe "slide". Parmi eux, la classe conteneur définit le style du conteneur et la classe slide définit le style de l'élément image. En définissant l'attribut de débordement du conteneur sur caché, l'effet de masquage de la partie de l'élément d'image au-delà du conteneur est obtenu.

Ensuite, nous devons utiliser JavaScript pour obtenir les effets de commutation coulissante de haut en bas, de mise à l'échelle et d'animation de fondu d'entrée et de sortie de l'image. Voici un exemple de code JavaScript :

window.addEventListener('DOMContentLoaded', function() {
  var slides = document.querySelectorAll('.slide');
  var currentIndex = 0;
  
  function showSlide(index) {
    // 隐藏当前显示的图片
    slides[currentIndex].style.display = 'none';
    
    // 显示指定索引的图片
    slides[index].style.display = 'block';
    
    // 设置当前索引
    currentIndex = index;
  }
  
  function animateSlide(index) {
    var slide = slides[index];
    
    // 先缩小图片
    slide.style.transform = 'scale(0)';
    slide.style.opacity = 0;
    
    // 等缩放动画完成后，再展示出来
    setTimeout(function() {
      slide.style.transition = 'transform 0.5s, opacity 0.5s';
      slide.style.transform = 'scale(1)';
      slide.style.opacity = 1;
    }, 100);
  }
  
  function nextSlide() {
    var nextIndex = currentIndex + 1;
    
    if (nextIndex >= slides.length) {
      nextIndex = 0;
    }
    
    showSlide(nextIndex);
    animateSlide(nextIndex);
  }
  
  // 每隔3秒切换到下一张图片
  setInterval(nextSlide, 3000);
});

Copier après la connexion

Dans le code ci-dessus, nous obtenons d'abord tous les éléments d'image avec la classe slide via document.querySelectorAll('.slide') et les enregistrons dans la variable slides. currentIndex est utilisé pour enregistrer l'index d'image actuellement affiché.

Ensuite, la fonction showSlide est définie pour afficher l'image à l'index spécifié. Dans la fonction, nous définissons l'attribut d'affichage de l'élément d'image actuellement affiché sur « aucun » pour le masquer, et définissons l'attribut d'affichage de l'élément d'image à l'index spécifié sur « bloquer » pour l'afficher.

La fonction animateSlide est utilisée pour obtenir les effets de zoom et de fondu des images. Dans la fonction, nous définissons d'abord les propriétés de transformation et d'opacité de l'élément d'image sur un état réduit et une transparence de 0. Retardez ensuite 0,1 seconde via la fonction setTimeout et définissez les attributs de transition, de transformation et d'opacité de l'élément d'image à l'état de grossissement et de transparence sur 1. En raison du réglage de l'attribut de transition, il y aura un effet de transition pendant le processus de fondu d'entrée et de sortie.

Enfin, le changement d'image est réalisé grâce à la fonction nextSlide. Dans la fonction, nous calculons d'abord l'index de l'image suivante, l'affichons et ajoutons des effets d'animation via la fonction showSlide et la fonction animateSlide respectivement.

Dans l'événement DOMContentLoaded de l'objet window, nous effectuons les opérations ci-dessus. Et réglez la minuterie pour passer automatiquement à l'image suivante toutes les 3 secondes grâce à la fonction setInterval.

En combinant le code HTML et JavaScript ci-dessus, nous avons obtenu l'effet de commutation coulissante de haut en bas de l'image et ajouté les effets d'animation de zoom et de fondu. De cette façon, le changement d'image est rendu plus vivant et plus attrayant, offrant aux utilisateurs une meilleure expérience de navigation sur le Web. Notez que le chemin de l'image dans l'exemple doit être ajusté en fonction de la situation réelle.

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!