HTML, CSS und jQuery: Erstellen Sie ein animiertes Schiebefenster-js-Tutorial-php.cn

HTML, CSS und jQuery: Erstellen Sie ein animiertes Schiebefenster

WBOY

Freigeben： 2023-10-24 11:18:22

Original

1106 Leute haben es durchsucht

HTML, CSS und jQuery: Erstellen Sie ein animiertes Schiebefenster

HTML, CSS und jQuery: Erstellen Sie ein Schiebefenster mit animierten Effekten

Heutzutage legt das Webdesign immer mehr Wert auf Benutzererfahrung und Animationseffekte. Mit etwas einfachem Code können Sie einen coolen Schiebefenstereffekt erstellen. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML, CSS und jQuery ein Schiebefenster mit animierten Effekten erstellen, und stellen spezifische Codebeispiele bereit.

Zuerst müssen wir eine HTML-Struktur erstellen und ihr die notwendigen CSS-Stile hinzufügen. Das Folgende ist ein Beispiel für eine HTML-Struktur:

<!DOCTYPE html>
<html>
<head>
  <title>滑动窗口</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="slider-container">
    <div class="slider">
      <div class="slide">
        <img src="image1.jpg" alt="Image 1">
      </div>
      <div class="slide">
        <img src="image2.jpg" alt="Image 2">
      </div>
      <div class="slide">
        <img src="image3.jpg" alt="Image 3">
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Nach dem Login kopieren

Als nächstes fügen wir den entsprechenden CSS-Stil entsprechend der HTML-Struktur hinzu. Das Folgende ist ein Beispiel für einen CSS-Stil:

.slider-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 300%;
  animation: slide 15s infinite;
}

.slide {
  flex: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0);
  }
}

Nach dem Login kopieren

Im obigen Code erstellen wir einen .slider-container-Container, um den Inhalt des Schiebefensters zu umschließen. Durch die Einstellung overflow: versteckt können wir den Inhalt des Überlaufteils ausblenden. .slider ist der Hauptteil des Schiebefensters. Wir verwenden display: flex, um alle Schiebeelemente in einer Zeile anzuzeigen. .slide ist ein Container für jedes Schiebeelement, der ein Bild enthält. Durch die Einstellung von flex: 1 kann jedes Schiebeelement gleichmäßig über die Breite des Containers verteilt werden. .slider-container容器，用于包裹滑动窗口的内容。通过设置overflow: hidden，我们可以隐藏溢出部分的内容。.slider是滑动窗口的主要部分，我们使用display: flex在一行中显示所有的滑动元素。.slide是每个滑动元素的容器，里面包含了一个图片。通过设置flex: 1，每个滑动元素可以平均分配容器的宽度。

接下来，我们使用jQuery来实现滑动动画效果。在script.js文件中添加以下代码：

$(document).ready(function() {
  $('.slider').hover(function() {
    $(this).stop();
  }, function() {
    $(this).animate({ 'margin-left': '-100%' }, 5000, function() {
      $(this).css('margin-left', '0');
    });
  });
});

Nach dem Login kopieren

上述代码中，使用$(document).ready()确保文档加载完后执行代码。当鼠标悬停在滑动窗口上时，动画将停止。当鼠标移开后，滑动窗口将以5秒的动画时间向左滑动到下一张图片，并在最后一张图片后重新开始滑动。

最后，我们还需要创建一个style.css

Als nächstes verwenden wir jQuery, um den Gleitanimationseffekt zu implementieren. Fügen Sie den folgenden Code in die Datei script.js ein:

body {
  margin: 0;
  padding: 0;
}

.slider-container {
  margin: 50px auto;
}

Nach dem Login kopieren

Verwenden Sie im obigen Code $(document).ready(), um sicherzustellen, dass der Code danach ausgeführt wird Das Dokument wird geladen. Die Animation stoppt, wenn die Maus über das Schiebefenster bewegt wird. Wenn die Maus entfernt wird, gleitet das Schiebefenster mit einer Animationszeit von 5 Sekunden nach links zum nächsten Bild und startet nach dem letzten Bild erneut.

Schließlich müssen wir auch eine style.css-Datei erstellen und diese in HTML einführen, um den Stil des Schiebefensters festzulegen. Fügen Sie der Datei den folgenden Code hinzu: 🎜rrreee🎜Mit dem obigen Code legen wir die Ränder und den Abstand des gesamten Dokuments sowie die äußeren Ränder des Schiebefenstercontainers fest. 🎜🎜Oben finden Sie alle Codebeispiele, die zum Erstellen eines Schiebefensters mit Animationseffekten erforderlich sind. Durch die Kombination von HTML, CSS und jQuery können wir ganz einfach einen coolen Schiebefenstereffekt erzielen. Im tatsächlichen Einsatz können weitere Stil- und Interaktionsanpassungen entsprechend den eigenen Bedürfnissen vorgenommen werden. Ich hoffe, dieser Artikel ist für alle hilfreich! 🎜

Das obige ist der detaillierte Inhalt vonHTML, CSS und jQuery: Erstellen Sie ein animiertes Schiebefenster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!