JavaScript melaksanakan penutupan gambar

Dalam reka bentuk web, gambar adalah salah satu elemen yang paling biasa. Apabila pengguna menyemak imbas halaman web, mereka kadangkala menghadapi situasi di mana mereka perlu menutup imej Pada masa ini, kami boleh menggunakan JavaScript untuk melaksanakan fungsi menutup imej. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi penutupan imej.

1. Analisis Keperluan

Selepas memasukkan gambar ke dalam halaman, perlu ada cara untuk menutup gambar supaya pengguna boleh terus melayari halaman. Dengan menganalisis keperluan, kami boleh menentukan bahawa keperluan berikut diperlukan untuk melaksanakan fungsi ini:

1. Mengklik kawasan di luar imej atau butang tutup boleh menutup imej
2. Dalam untuk memudahkan pelarasan dan pengubahsuaian Fungsi ini, kod hendaklah mudah difahami dan diselenggara;
3. Kelajuan pelaksanaan kod hendaklah pantas dan tidak menjejaskan pengalaman pengendalian pengguna.

2. Idea pelaksanaan

Berdasarkan analisis permintaan di atas, kami boleh mereka idea pelaksanaan berikut:

1. Untuk setiap gambar yang akan dipaparkan, Gunakan div untuk membungkusnya dan tambahkan latar belakang hitam lut sinar pada div itu; pengguna mengklik pada div, jika pengguna mengklik pada kawasan selain daripada imej atau butang tutup, div akan disembunyikan.
2. 3. Langkah pelaksanaan

Tambah elemen div dalam fail HTML dan letakkan imej untuk dipaparkan dalam div.

<div id="imgBox">
    <img src="yourImage.jpg">
</div>

1. Tetapkan gaya elemen div ini dalam fail CSS.

#imgBox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999;
}

#imgBox img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 90%;
    max-height: 90%;
}

2. Tulis kod dalam fail JavaScript untuk menetapkan acara klik untuk elemen div.

var imgBox = document.getElementById('imgBox');
imgBox.addEventListener('click',function(e){
    if(e.target === imgBox || e.target.nodeName === 'SPAN'){
        imgBox.style.display = 'none';
    }
});

Dalam kod di atas, kami menambahkan acara klik pada elemen div Apabila pengguna mengklik elemen div, kod akan menentukan sama ada elemen sasaran acara klik ialah elemen div itu sendiri atau butang tutup A tertentu (dalam contoh ini, kami menggunakan elemen span sebagai butang tutup), jika ya, elemen div disembunyikan.
4. Kod lengkap

Kod teras adalah seperti berikut:

<div id="imgBox">
    <img src="yourImage.jpg">
    <span>关闭</span>
</div>

#imgBox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999;
}

#imgBox img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 90%;
    max-height: 90%;
}

#imgBox span{
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    cursor: pointer;
}

#imgBox span:hover{
    text-decoration: underline;
}

var imgBox = document.getElementById('imgBox');
imgBox.addEventListener('click',function(e){
    if(e.target === imgBox || e.target.nodeName === 'SPAN'){
        imgBox.style.display = 'none';
    }
});

5 Ringkasan

Melalui langkah di atas, kami berjaya menggunakan JavaScript untuk menutup Fungsi imej. Apabila pengguna mengklik kawasan di luar imej atau butang tutup, imej akan hilang daripada halaman. Struktur kod fungsi adalah jelas, mudah difahami dan diselenggara, dan ia dilaksanakan dengan cepat. Menggunakan fungsi ini boleh meningkatkan pengalaman pengendalian pengguna dan membolehkan pengguna menyemak imbas web dengan lebih mudah.

Atas ialah kandungan terperinci JavaScript melaksanakan penutupan gambar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!