CSS 팁: 이미지 삭제 효과를 얻는 방법

웹 개발에서는 페이지의 상호 작용성과 아름다움을 향상시키기 위해 몇 가지 특수 효과를 구현해야 하는 경우가 많습니다. 그 중 사진 삭제 효과는 일반적인 요구 사항입니다. 예를 들어, 상품 목록 페이지에서 사용자는 '삭제' 버튼을 클릭하여 원하지 않는 상품을 삭제할 수 있습니다. 이때 페이지에 있는 해당 상품 이미지도 삭제되어야 합니다. 그렇다면 이 효과를 달성하는 방법은 무엇입니까? 이번 글에서는 CSS를 통해 이미지 삭제 효과를 얻는 방법을 소개하겠습니다.

우선, 사진을 삭제한다고 해서 페이지에서 사진이 사라지는 것이 아니라 페이지의 사진이 더 이상 공간과 레이아웃을 차지하지 않는다는 것을 분명히 해야 합니다. 이미지의 너비와 높이를 0으로 설정한 다음 외부 컨테이너 요소의 높이를 0으로 설정하면 이미지 삭제 효과를 얻을 수 있습니다. 구체적인 구현 단계는 다음과 같습니다.

1단계: HTML 구조

우리가 구현하려는 것은 제품 목록 페이지라고 가정합니다. 각 제품에는 사진과 일부 설명 텍스트가 있습니다. HTML 구조는 다음과 같아야 합니다.

<div>
    <img  src="/static/imghwm/default1.png" data-src="商品图片的URL" class="lazy" alt="CSS 팁: 이미지 삭제 효과를 얻는 방법" >
    <div>
        商品描述文字
    </div>
    <button>删除</button>
</div>

위 코드에서는 각 제품에 대해 제품 이미지 <img alt="CSS 팁: 이미지 삭제 효과를 얻는 방법" >.item를 정의합니다. >, 제품 설명 텍스트 <div> 및 "삭제" 버튼 <code><button></button>. .item，里面包含了商品图片<img alt="CSS 팁: 이미지 삭제 효과를 얻는 방법" >、商品描述文字<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

2단계: CSS 스타일

(1) 이미지의 기본 스타일 지우기

이미지가 요구 사항에 맞게 정확하게 표시되도록 하려면 다음과 같이 이미지의 기본 스타일을 지워야 합니다. 🎜rrreee 🎜위 코드에서는 이미지를 변경합니다. display 속성이 block으로 설정되어 이미지가 블록 수준 요소처럼 배치되고 중앙에 배치될 수 있습니다. 동시에 이미지가 너무 커서 컨테이너를 초과하는 것을 방지하기 위해 이미지 코드의 max-width를 100%로 설정하고, 마지막으로 이미지의 높이를 설정합니다. >를 auto로 설정하면 이미지 높이가 자동으로 너비와 같아지므로 이미지 변형을 방지할 수 있습니다. 🎜🎜(2) 사진 스타일 삭제🎜🎜다음으로 사진 삭제 스타일을 설정해야 합니다. 제품 이미지의 너비와 높이를 0으로 설정하고, 외부 컨테이너 요소의 높이를 0으로 설정하면 이미지 삭제 효과를 얻을 수 있습니다. 코드는 다음과 같습니다. 🎜rrreee🎜코드에서 먼저 다음을 추가합니다. .deleted 클래스를 사용하고 CSS 선택기를 사용하여 이미지의 너비와 높이를 0으로 설정하고 외부 컨테이너 요소의 높이도 0으로 설정합니다. 🎜🎜3단계: JavaScript 코드🎜🎜마지막으로 삭제 버튼의 클릭 이벤트를 이미지 삭제 효과에 바인딩해야 합니다. 코드는 다음과 같습니다. 🎜rrreee🎜코드에서는 먼저 document.querySelectorAll 메서드를 통해 페이지의 모든 삭제 버튼을 얻은 다음 forEach를 사용하여 반복합니다. 그들을. 그런 다음 각 버튼에 클릭 이벤트를 추가하고 클릭 시 해당 제품 컨테이너 요소 .item를 찾은 다음 .deleted 클래스를 추가하여 해당 제품 이미지를 삭제합니다. . 🎜🎜요약: 🎜🎜위의 방법을 통해 웹페이지에서 이미지를 삭제하는 효과를 쉽게 얻을 수 있습니다. 물론 이것은 단지 방법 중 하나일 뿐입니다. 실제로 웹 페이지에서 특수 효과를 얻는 방법은 많습니다. 우리는 실제 요구에 따라 이를 달성하기 위해 가장 적절하고 간단한 방법을 선택해야 합니다. 동시에, 웹 페이지에 특수 효과를 추가할 때 사용자에게 불필요한 문제나 방해를 주지 않도록 주의할 필요도 있습니다. 🎜