HTML, CSS et jQuery : créez un magnifique mur d'images

HTML, CSS et jQuery : Construisez un magnifique mur d'images

Dans la conception de sites Web, il est souvent nécessaire d'utiliser des images pour augmenter l'attractivité et la beauté de la page. En tant que méthode de mise en page courante, le mur d'images peut afficher plusieurs images sur la page Web de manière ordonnée ou désordonnée, donnant aux gens une sensation soignée et unifiée. Cet article utilisera un exemple de code pour présenter comment utiliser HTML, CSS et jQuery pour créer un magnifique mur d'images.

Tout d’abord, vous devez préparer quelques images comme matériel d’affichage. Vous pouvez sélectionner un groupe d'images associées ou les rechercher vous-même en fonction de vos besoins spécifiques. Assurez-vous que chaque image a la même taille et les mêmes proportions afin qu'elle apparaisse parfaitement sur votre mur d'images.

Ensuite, nous commençons à écrire du code HTML. Créez d'abord un élément <div> et définissez un ID unique pour les opérations CSS et jQuery ultérieures. <code><div>元素，设置一个唯一的ID用于后续的CSS和jQuery操作。<pre class='brush:html;toolbar:false;'>&lt;div id=&quot;image-wall&quot;&gt;&lt;/div&gt;</pre><p>然后，在JavaScript的区域内，我们使用jQuery动态地为这个<code><div>元素添加图片。通过循环遍历图片数组，将每张图片作为一个<code><img alt="HTML, CSS et jQuery : créez un magnifique mur d'images" >元素插入到#image-wall中。

var imageArray = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg'];

$.each(imageArray, function(index, value) {
  $('<img  alt="HTML, CSS et jQuery : créez un magnifique mur d'images" >').attr('src', value).appendTo('#image-wall');
});

接下来，我们可以使用CSS来美化这个图片墙。通过对#image-wall以及内部的图片元素进行样式设置，来定义图片墙的布局和外观。

#image-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#image-wall img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-bottom: 20px;
}

在上述示例中，我们使用了CSS的flex布局，使图片墙能够在空间有限的情况下自适应排列。通过设置img元素的宽度、高度和object-fit属性，可以保持每张图片的比例不变，并且使用margin-bottom

$('#image-wall img').hover(function() {
  $(this).css('transform', 'scale(1.2)');
}, function() {
  $(this).css('transform', 'scale(1)');
});

Ensuite, dans la zone JavaScript, nous utilisons jQuery pour ajouter dynamiquement une image à cet élément <div>. En parcourant le tableau d'images, chaque image est insérée dans <code>#image-wall en tant qu'élément <img alt="HTML, CSS et jQuery : créez un magnifique mur d'images" >.

rrreee

Ensuite, nous pouvons utiliser CSS pour embellir ce mur d'images. Définissez la disposition et l'apparence du mur d'images en stylisant #image-wall et les éléments d'image internes.

rrreee

Dans l'exemple ci-dessus, nous avons utilisé la disposition flexible de CSS pour permettre au mur d'images d'être disposé de manière adaptative lorsque l'espace est limité. En définissant les attributs width, height et object-fit de l'élément img, vous pouvez conserver les proportions de chaque image inchangées et utiliser margin-bottom Ajoutez un espace entre chaque image.

Enfin, nous pouvons ajouter des effets d'interaction de souris au mur d'images pour augmenter l'expérience utilisateur. Prenons comme exemple l'effet d'agrandir une image. Dans la zone de code jQuery, nous pouvons ajouter le code suivant :

rrreee

Dans le code ci-dessus, en utilisant la méthode du survol, lorsque la souris survole l'image, elle sera agrandie. de 1,2 fois. Restaure l'image à sa taille d'origine lorsque la souris ne la survole plus. 🎜🎜Grâce aux étapes ci-dessus, nous avons réussi à construire un magnifique mur d'images. Vous pouvez personnaliser davantage votre mur d'images en ajoutant davantage de styles CSS et d'effets jQuery. 🎜🎜Pour résumer, ce n’est pas compliqué de construire un beau mur d’images en utilisant HTML, CSS et jQuery. Grâce à des paramètres de mise en page raisonnables et à quelques effets interactifs simples, vous pouvez rendre votre page Web plus vivante et plus riche. J'espère que l'exemple de code de cet article pourra vous aider à créer votre propre mur d'images. 🎜