Wie kann ich mit JavaScript den Auf- und Ab-Schiebeeffekt von Bildern erzielen und gleichzeitig Zoom- und Fade-Animationen hinzufügen?-js-Tutorial-php.cn

Wie kann ich mit JavaScript den Auf- und Ab-Schiebeeffekt von Bildern erzielen und gleichzeitig Zoom- und Fade-Animationen hinzufügen?

PHPz

Freigeben： 2023-10-20 17:15:11

Original

1095 Leute haben es durchsucht

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

JavaScript Wie erreicht man den Auf- und Ab-Schiebeeffekt von Bildern und fügt gleichzeitig Zoom- und Fade-Animationen hinzu?

Im Webdesign werden Bildwechseleffekte häufig verwendet, um das Benutzererlebnis zu verbessern. Unter diesen Umschalteffekten sind Auf- und Abwärtsgleiten, Zoom- und Fading-Animationen relativ häufig und attraktiv. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Kombination dieser drei Animationseffekte erzielen.

Zunächst müssen wir mithilfe von HTML eine grundlegende Webseitenstruktur erstellen, die die anzuzeigenden Bildelemente enthält. Das Folgende ist ein Beispiel für einen HTML-Code:

<!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>

Nach dem Login kopieren

Im obigen Code verwenden wir ein Container-Div, das drei Bildelemente enthält. Jedes Bildelement hat die Klasse „slide“. Unter diesen definiert die Containerklasse den Stil des Containers und die Folienklasse definiert den Stil des Bildelements. Durch Setzen des Überlaufattributs des Containers auf „Ausgeblendet“ wird erreicht, dass der Teil des Bildelements außerhalb des Containers ausgeblendet wird.

Als nächstes müssen wir JavaScript verwenden, um die nach oben und unten gleitenden Umschalt-, Skalierungs- und Ein- und Ausblend-Animationseffekte des Bildes zu erzielen. Das Folgende ist ein Beispiel für einen JavaScript-Code:

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);
});

Nach dem Login kopieren

Im obigen Code rufen wir zunächst alle Bildelemente mit der Slide-Klasse über document.querySelectorAll('.slide') ab und speichern sie in der Slides-Variablen. currentIndex wird verwendet, um den aktuell angezeigten Bildindex aufzuzeichnen.

Dann wird die showSlide-Funktion definiert, um das Bild am angegebenen Index anzuzeigen. In der Funktion setzen wir das Anzeigeattribut des aktuell angezeigten Bildelements auf „none“, um es auszublenden, und setzen das Anzeigeattribut des Bildelements am angegebenen Index auf „block“, um es anzuzeigen.

Die animateSlide-Funktion wird verwendet, um Zoom- und Fade-Effekte von Bildern zu erzielen. In der Funktion setzen wir zunächst die Transformations- und Opazitätseigenschaften des Bildelements auf einen reduzierten Zustand und eine Transparenz von 0. Verzögern Sie dann 0,1 Sekunden durch die setTimeout-Funktion und setzen Sie die Übergangs-, Transformations- und Deckkraftattribute des Bildelements auf den Vergrößerungs- und Transparenzstatus auf 1. Aufgrund der Einstellung des Übergangsattributs entsteht während des Ein- und Ausblendvorgangs ein Übergangseffekt.

Abschließend wird der Bildwechsel durch die nextSlide-Funktion erreicht. In der Funktion berechnen wir zunächst den Index des nächsten Bildes, zeigen es an und fügen Animationseffekte über die Funktion showSlide bzw. animateSlide hinzu.

Im DOMContentLoaded-Ereignis des Fensterobjekts führen wir die oben genannten Vorgänge aus. Und stellen Sie den Timer so ein, dass er über die setInterval-Funktion automatisch alle 3 Sekunden zum nächsten Bild wechselt.

Durch die Kombination des oben genannten HTML- und JavaScript-Codes haben wir den Auf- und Ab-Schiebeeffekt des Bildes erreicht und die Zoom- und Fade-Animationseffekte hinzugefügt. Auf diese Weise wird das Wechseln von Bildern lebendiger und attraktiver gestaltet, was den Benutzern ein besseres Erlebnis beim Surfen im Internet bietet. Beachten Sie, dass der Bildpfad im Beispiel entsprechend der tatsächlichen Situation angepasst werden muss.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript den Auf- und Ab-Schiebeeffekt von Bildern erzielen und gleichzeitig Zoom- und Fade-Animationen hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!