Maison >interface Web >js tutoriel >HTML, CSS et jQuery : Créez une fenêtre coulissante animée

HTML, CSS et jQuery : Créez une fenêtre coulissante animée

WBOYoriginal: 2023-10-24 11:18:221123parcourir

HTML, CSS et jQuery : créez une fenêtre coulissante avec des effets animés

De nos jours, la conception Web accorde de plus en plus d'attention à l'expérience utilisateur et aux effets d'animation. Avec un simple code, vous pouvez créer un effet de fenêtre coulissante sympa. Cet article vous expliquera comment utiliser HTML, CSS et jQuery pour créer une fenêtre coulissante avec des effets animés et fournira des exemples de code spécifiques.

Tout d'abord, nous devons créer une structure HTML et y ajouter les styles CSS nécessaires. Voici un exemple de structure HTML :

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

Ensuite, nous ajoutons le style CSS correspondant en fonction de la structure HTML. Voici un exemple de style CSS :

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

Dans le code ci-dessus, nous créons un conteneur .slider-container pour envelopper le contenu de la fenêtre coulissante. En définissant overflow: Hidden, nous pouvons masquer le contenu de la partie overflow. .slider est la partie principale de la fenêtre coulissante. Nous utilisons display: flex pour afficher tous les éléments coulissants sur une seule ligne. .slide est un conteneur pour chaque élément coulissant, qui contient une image. En définissant flex : 1, chaque élément coulissant peut être réparti uniformément sur la largeur du conteneur. .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');
    });
  });
});

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

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

Ensuite, nous utilisons jQuery pour implémenter l'effet d'animation coulissante. Ajoutez le code suivant dans le fichier script.js :

body {
  margin: 0;
  padding: 0;
}

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

Dans le code ci-dessus, utilisez $(document).ready() pour vous assurer que le code est exécuté après le document est chargé. L'animation s'arrêtera lorsque la souris passera sur la fenêtre coulissante. Lorsque la souris est retirée, la fenêtre coulissante glissera vers la gauche jusqu'à l'image suivante avec un temps d'animation de 5 secondes, et redémarrera après la dernière image.

Enfin, nous devons également créer un fichier style.css et l'introduire dans HTML pour définir le style de la fenêtre coulissante. Ajoutez le code suivant au fichier : 🎜rrreee🎜Avec le code ci-dessus, nous définissons les marges et le remplissage de l'ensemble du document, ainsi que les marges extérieures du conteneur à fenêtre coulissante. 🎜🎜Ce ci-dessus contient tous les exemples de code nécessaires pour créer une fenêtre coulissante avec des effets d'animation. Grâce à la combinaison de HTML, CSS et jQuery, nous pouvons facilement obtenir un effet de fenêtre coulissante sympa. En utilisation réelle, d'autres ajustements de style et d'interaction peuvent être effectués en fonction de vos propres besoins. J'espère que cet article sera utile à tout le monde ! 🎜

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!

jquery css html JS 外边距 display overflow flex

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser Layui pour obtenir des effets d'agrandissement et de retournement d'imageArticle suivant：Comment utiliser Layui pour obtenir des effets d'agrandissement et de retournement d'image

Articles Liés

Voir plus