Petua CSS: Bagaimana untuk mencapai kesan pemadaman imej

Dalam pembangunan web, kami selalunya perlu melaksanakan beberapa kesan khas untuk meningkatkan interaktiviti dan estetika halaman. Antaranya, kesan pemadaman gambar adalah keperluan biasa. Sebagai contoh, pada halaman senarai produk, pengguna boleh memadamkan produk yang mereka tidak mahu dengan mengklik butang "Padam" Pada masa ini, imej produk yang sepadan pada halaman itu juga harus dipadamkan. Jadi, bagaimana untuk mencapai kesan ini? Artikel ini akan memperkenalkan kaedah untuk mencapai kesan pemadaman imej melalui CSS.

Pertama sekali, kita perlu menjelaskan dengan jelas bahawa memadamkan gambar tidak bermakna gambar itu hilang daripada halaman, tetapi gambar pada halaman itu tidak lagi mengambil ruang dan susun atur. Kita boleh mencapai kesan pemadaman imej dengan menetapkan lebar dan ketinggian imej kepada 0, dan kemudian menetapkan ketinggian elemen bekas luarnya kepada 0. Langkah pelaksanaan khusus adalah seperti berikut:

Langkah 1: Struktur HTML

Kami menganggap bahawa perkara yang ingin kami laksanakan ialah halaman senarai produk. Setiap produk mempunyai gambar dan beberapa teks penerangan. Struktur HTML kami sepatutnya kelihatan seperti ini:

<div class="item">
    <img src="商品图片的URL" alt="商品描述">
    <div class="description">
        商品描述文字
    </div>
    <button class="delete-btn">删除</button>
</div>

Dalam kod di atas, kami mentakrifkan elemen bekas luar .item untuk setiap produk, yang mengandungi gambar produk <img> dan penerangan produk Teks <div> dan Butang "Padam" <button>.

Langkah 2: Gaya CSS

(1) Kosongkan gaya lalai imej

Untuk membuat paparan imej tepat mengikut keperluan kami, kami perlu mengosongkan gaya lalai bagi imej tersebut. elemen peringkat blok; pada masa yang sama, kami menetapkan

imej ditetapkan kepada 100% untuk mengelakkan imej daripada menjadi terlalu besar untuk melebihi bekasnya, kami menetapkan

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

imej kepada

supaya ketinggian imej secara automatik akan berskala berkadaran dengan lebar untuk mengelakkan ubah bentuk imej. displayblock (2) Padamkan gaya gambar max-widthheightSeterusnya, kita perlu menetapkan gaya untuk memadamkan gambar. Kita boleh mencapai kesan pemadaman imej dengan menetapkan lebar dan tinggi imej produk kepada 0, dan kemudian menetapkan ketinggian elemen bekas luar kepada 0. Kodnya adalah seperti berikut: auto

Dalam kod tersebut, mula-mula kami Tambah kelas

pada produk dalam keadaan yang dipadamkan, kemudian gunakan pemilih CSS untuk menetapkan lebar dan tinggi imejnya kepada 0, dan juga menetapkan ketinggian elemen bekas luarnya kepada 0.

Langkah 3: Kod JavaScript

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

.item.deleted {
    height:0;
}

Akhir sekali, kita perlu mengikat peristiwa klik butang padam dengan kesan pemadaman imej. Kodnya adalah seperti berikut: .deleted

Dalam kod, kami mula-mula mendapatkan semua butang padam dalam halaman melalui kaedah

dan gunakan

untuk mengulanginya. Kemudian, kami menambah acara klik pada setiap butang, cari elemen bekas produk yang sepadan

apabila diklik dan tambah kelas

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

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

untuk mencapai kesan pemadaman imej produk yang sepadan.

document.querySelectorAllRingkasan: forEach.itemMelalui kaedah di atas, kita boleh mencapai kesan pemadaman imej pada halaman web dengan mudah. Sudah tentu, ini hanyalah salah satu kaedah Sebenarnya, terdapat banyak cara untuk mencapai kesan khas dalam halaman web. Kita perlu memilih kaedah yang paling sesuai dan paling mudah untuk mencapainya berdasarkan keperluan sebenar. Pada masa yang sama, kami juga perlu berhati-hati agar tidak menimbulkan masalah atau gangguan yang tidak perlu kepada pengguna apabila menambah kesan khas pada halaman web. .deleted

Atas ialah kandungan terperinci Petua CSS: Bagaimana untuk mencapai kesan pemadaman imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!