Comment créer une galerie d'images réactive en utilisant HTML, CSS et jQuery-js tutoriel-php.cn

Comment créer une galerie d'images réactive en utilisant HTML, CSS et jQuery

王林

Libérer： 2023-10-27 16:19:50

original

1396 Les gens l'ont consulté

Comment créer une galerie dimages réactive en utilisant HTML, CSS et jQuery

Comment créer une galerie d'images réactive en utilisant HTML, CSS et jQuery

Avant-propos :
Avec la popularité des appareils mobiles, le design réactif est devenu l'un des standards importants de la conception Web moderne. Dans cet article, nous présenterons comment créer une galerie d'images réactive en utilisant HTML, CSS et jQuery. Cette galerie d'images nous permet d'afficher et de gérer avec élégance des images de différentes tailles sur différents appareils et de fournir des fonctionnalités interactives.

Structure HTML :
Tout d'abord, nous devons créer une structure HTML de base pour la galerie d'images. Vous trouverez ci-dessous un modèle HTML simple que vous pouvez modifier selon vos besoins.

<!DOCTYPE html>
<html>
<head>
  <title>响应式图片库</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="gallery">
    <div class="image">
      <img src="image1.jpg" alt="Image 1">
      <div class="overlay">
        <a href="image1.jpg" target="_blank">查看大图</a>
      </div>
    </div>
    <!-- 添加更多图片 -->
  </div>
</body>
</html>

Copier après la connexion

Style CSS :
Ensuite, nous devons styliser la galerie d'images en utilisant CSS. Vous trouverez ci-dessous un exemple CSS simple que vous pouvez modifier en fonction de vos besoins.

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.image {
  position: relative;
  margin: 10px;
  flex: 1 0 calc(25% - 20px);
}

.image img {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay a {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  padding: 10px 20px;
  border: 2px solid #fff;
  transition: background-color 0.3s ease;
}

.overlay:hover {
  opacity: 1;
}

.overlay:hover a {
  background-color: #fff;
  color: #000;
}

Copier après la connexion

Interaction jQuery :
Enfin, nous utilisons jQuery pour ajouter des fonctionnalités interactives à la galerie d'images. L'exemple de code suivant montre comment modifier la taille d'une image lorsque vous cliquez dessus.

$(document).ready(function() {
  $(".image").click(function() {
    $(this).toggleClass("enlarged");
  });
});

Copier après la connexion

Dans cet exemple, nous utilisons la fonction .toggleClass() de jQuery pour basculer le nom de la classe de style "agrandi" lorsque l'on clique sur l'image. Nous pouvons ajouter la classe .enlarged au style CSS pour ajuster la taille de l'image cliquée.

.enlarged {
  flex: 0 0 50%;
}

Copier après la connexion

De cette façon, lorsque l'utilisateur clique sur une image, celle-ci sera agrandie de moitié par rapport à sa taille d'origine.

Conclusion :
En utilisant HTML, CSS et jQuery, nous pouvons facilement créer une galerie d'images réactive. Dans cette galerie d'images, nous pouvons afficher et traiter des images de différentes tailles et fournir des fonctionnalités interactives pour chaque image. J'espère que cet article vous a aidé à créer votre propre galerie d'images responsive !

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!