HTML, CSS et jQuery : créez une belle grille d'affichage d'images-js tutoriel-php.cn

HTML, CSS et jQuery : créez une belle grille d'affichage d'images

PHPz

Libérer： 2023-10-27 16:21:42

original

882 Les gens l'ont consulté

HTML, CSS et jQuery : créez une belle grille daffichage dimages

HTML, CSS et jQuery : créez une belle grille d'affichage d'images

À l'ère hautement graphique d'Internet d'aujourd'hui, l'affichage d'images est devenu un élément indispensable de la conception de sites Web. Afin d'améliorer l'expérience utilisateur et d'attirer l'attention des utilisateurs, il est crucial de créer une belle grille d'affichage d'images. Dans cet article, nous utiliserons HTML, CSS et jQuery pour implémenter une grille d'affichage d'images simple mais attrayante.

Tout d’abord, nous devons créer une structure HTML de base. Voici un modèle HTML simple qui comprend un conteneur de grille avec une image :

<!DOCTYPE html>
<html>
  <head>
    <title>图片展示网格</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">
        <img src="image1.jpg" alt="图片1">
      </div>
      <div class="grid-item">
        <img src="image2.jpg" alt="图片2">
      </div>
      <div class="grid-item">
        <img src="image3.jpg" alt="图片3">
      </div>
      <!-- 添加更多图片 -->
    </div>
  </body>
</html>

Copier après la connexion

Ensuite, nous utiliserons CSS pour styliser le conteneur de grille et les images. Voici un exemple CSS simple que vous pouvez modifier selon vos besoins :

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  position: relative;
}

.grid-item img {
  width: 100%;
  display: block;
  border-radius: 5px;
}

.grid-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.grid-item:hover .overlay {
  opacity: 1;
}

.grid-item .overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.grid-item .overlay-content h3 {
  margin: 0;
  font-size: 24px;
}

.grid-item .overlay-content p {
  margin: 10px 0;
  font-size: 14px;
}

Copier après la connexion

Dans le CSS ci-dessus, nous avons utilisé la disposition CSS Grid pour créer un conteneur de grille réactif. Nous avons également ajouté des coins arrondis et un masque translucide à chaque image pour offrir un meilleur effet visuel.

Maintenant, nous allons utiliser jQuery pour obtenir des effets dynamiques au survol de la souris. Voici un exemple jQuery simple où le masque apparaîtra lorsque la souris passe sur l'image :

$(document).ready(function() {
  $(".grid-item").hover(
    function() {
      $(this).find(".overlay").stop().animate({ opacity: 1 }, 300);
    },
    function() {
      $(this).find(".overlay").stop().animate({ opacity: 0 }, 300);
    }
  );
});

Copier après la connexion

Dans le code jQuery ci-dessus, nous avons utilisé la méthode .hover()方法来捕捉鼠标悬停事件，并使用.stop()方法来停止之前的动画。然后，我们使用.animate() pour ajuster la transparence du masque afin d'obtenir l'effet de fondu.

Pour résumer, en utilisant HTML, CSS et jQuery, nous pouvons facilement créer une belle grille d'affichage d'images. Vous pouvez l'étendre et le personnaliser selon vos besoins et ajouter plus d'images et d'effets interactifs. Une telle grille peut être utilisée pour afficher des produits, des photographies, des œuvres d'art, etc., ajoutant ainsi un attrait visuel et l'engagement des utilisateurs à votre site Web.

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!