CSS のヒント: 画像の削除効果を実現する方法

Web 開発では、ページのインタラクティブ性と美しさを向上させるために、いくつかの特殊効果を実装する必要があることがよくあります。その中で、画像削除効果は共通の要件です。例えば、商品一覧ページでは、不要な商品を「削除」ボタンをクリックして削除できますが、その際、ページ上の対応する商品画像も削除する必要があります。では、この効果を実現するにはどうすればよいでしょうか?この記事では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>

上記のコードでは、各製品の外部コンテナ要素 .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 クラスを追加して、対応する製品画像の削除効果を実現します。 。

概要:

上記の方法により、Web ページ上の画像を削除する効果を簡単に実現できます。もちろん、これは方法の 1 つにすぎず、実際には、Web ページに特殊効果を実現するさまざまな方法があります。実際のニーズに基づいて、それを実現するための最も適切かつ最も簡単な方法を選択する必要があります。一方で、Webページに特殊効果を加える際には、ユーザーに無用なトラブルや妨害を与えないよう注意する必要もあります。