Conseils CSS : Comment obtenir un effet de suppression d'image

Dans le développement web, nous devons souvent implémenter des effets spéciaux pour améliorer l'interactivité et la beauté de la page. Parmi eux, l’effet de suppression d’image est une exigence courante. Par exemple, sur une page de liste de produits, les utilisateurs peuvent supprimer les produits dont ils ne souhaitent pas en cliquant sur le bouton « Supprimer ». À ce stade, les images de produits correspondantes sur la page doivent également être supprimées. Alors, comment obtenir cet effet ? Cet article présentera une méthode pour obtenir un effet de suppression d'image via CSS.

Tout d'abord, nous devons préciser que supprimer une image ne signifie pas que l'image disparaît de la page, mais que l'image sur la page ne prend plus de place et de mise en page. Nous pouvons obtenir l'effet de suppression d'image en définissant la largeur et la hauteur de l'image sur 0, puis en définissant la hauteur de son élément conteneur externe sur 0. Les étapes spécifiques de mise en œuvre sont les suivantes :

Étape 1 : Structure HTML

Nous supposons que ce que nous voulons implémenter est une page de liste de produits. Chaque produit a une image et un texte de description. Notre structure HTML devrait ressembler à ceci :

<div>
    <img  src="/static/imghwm/default1.png" data-src="商品图片的URL" class="lazy" alt="Conseils CSS : Comment obtenir un effet de suppression d'image" >
    <div>
        商品描述文字
    </div>
    <button>删除</button>
</div>

Dans le code ci-dessus, nous définissons un élément conteneur externe .item pour chaque produit, qui contient l'image du produit <img alt="Conseils CSS : Comment obtenir un effet de suppression d'image" >, texte de description du produit <code><div> et bouton "Supprimer" <code><button></button>. .item，里面包含了商品图片<img alt="Conseils CSS : Comment obtenir un effet de suppression d'image" >、商品描述文字<div>和“删除”按钮<code><button></button>。

步骤2：CSS样式

（1） 清除图片默认样式

为了让图片能够完全按照我们的要求来显示，我们需要清除图片的默认样式，如下：

img {
    display:block;
    max-width:100%; /* 避免图片过大超出容器 */
    height:auto; /* 根据宽度等比缩放高度 */
}

以上代码中，我们将图片的display属性设置为block，这样图片就可以像块级元素一样定位、居中等操作；同时，我们将图片的max-width设置为100%，以避免图片过大超出其容器；最后，我们将图片的height设为auto，这样图片高度就会根据宽度自动等比缩放，避免图片变形。

（2） 删除图片样式

接下来，我们就需要设置删除图片的样式了。我们可以通过将商品图片宽度和高度设置为0，再将外层容器元素高度也设为0，来实现图片删除的效果，代码如下：

.item.deleted img {
    width:0;
    height:0;
}

.item.deleted {
    height:0;
}

代码中，我们首先为删除状态下的商品添加一个.deleted类，然后使用CSS选择器将其图片的宽度和高度都设为0，同时将其外层容器元素的高度也设为0。

步骤3：JavaScript代码

最后，我们需要将删除按钮的点击事件与删除图片的效果进行绑定。代码如下：

//获取所有删除按钮
var deleteBtns = document.querySelectorAll('.delete-btn');

//给每个按钮添加点击事件
deleteBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
        var item = this.parentNode;
        item.classList.add('deleted'); //添加.deleted类
    });
});

代码中，我们首先通过document.querySelectorAll方法获取页面中所有的删除按钮，并使用forEach循环遍历它们。然后，我们为每个按钮添加点击事件，在点击时找到对应的商品容器元素.item，并添加.deleted

Étape 2 : Style CSS

(1) Effacer le style par défaut de l'image

Afin que l'image s'affiche exactement selon nos exigences, nous devons effacer le style par défaut de l'image, comme suit : 🎜rrreee 🎜Dans le code ci-dessus, nous modifions l'image. L'attribut display est défini sur block, afin que l'image puisse être positionnée et centrée comme un élément de niveau bloc ; en même temps, nous définissons la max-width du code de l'image> à 100 % pour éviter que l'image ne soit trop grande pour dépasser son conteneur ; enfin, nous définissons la <code>hauteurde l'image ; > sur auto pour que la hauteur de l'image soit automatiquement égale à la largeur. Mise à l'échelle du rapport pour éviter la déformation de l'image. 🎜🎜(2) Supprimer le style d'image🎜🎜Ensuite, nous devons définir le style de suppression des images. Nous pouvons obtenir l'effet de suppression d'image en définissant la largeur et la hauteur de l'image du produit sur 0, puis en définissant la hauteur de l'élément du conteneur externe sur 0. Le code est le suivant : 🎜rrreee🎜Dans le code, nous ajoutons d'abord Une classe .deleted, puis utilisez les sélecteurs CSS pour définir la largeur et la hauteur de son image sur 0, ainsi que la hauteur de son élément conteneur externe sur 0. 🎜🎜Étape 3 : Code JavaScript🎜🎜Enfin, nous devons lier l'événement de clic du bouton de suppression à l'effet de supprimer l'image. Le code est le suivant : 🎜rrreee🎜Dans le code, nous obtenons d'abord tous les boutons de suppression de la page via la méthode document.querySelectorAll, et utilisons forEach pour parcourir eux. Ensuite, nous ajoutons un événement de clic à chaque bouton, recherchons l'élément conteneur de produit correspondant .item lorsque nous cliquons et ajoutons la classe .deleted pour supprimer l'image du produit correspondante. . 🎜🎜Résumé : 🎜🎜Grâce à la méthode ci-dessus, nous pouvons facilement obtenir l'effet de suppression d'images sur des pages Web. Bien sûr, ce n’est qu’une méthode parmi d’autres. En fait, il existe de nombreuses façons d’obtenir des effets spéciaux dans les pages Web. Nous devons choisir la méthode la plus appropriée et la plus simple pour y parvenir, en fonction des besoins réels. Dans le même temps, nous devons également veiller à ne pas causer de problèmes ou d’interférences inutiles aux utilisateurs lors de l’ajout d’effets spéciaux aux pages Web. 🎜