Bagaimana untuk menggunakan JavaScript untuk mencapai kesan peti cahaya imej?-tutorial js-php.cn

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan peti cahaya imej?

WBOY

Lepaskan： 2023-10-18 11:15:20

asal

704 orang telah melayarinya

如何使用 JavaScript 实现图片灯箱效果？

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan peti cahaya imej?

Dengan pembangunan media sosial dan reka bentuk web, kesan peti cahaya gambar telah menjadi salah satu kesan interaktif biasa dalam banyak tapak web. Kotak cahaya imej ialah kesan yang memaparkan imej yang diperbesarkan di tengah skrin dengan mengklik padanya. Ia bukan sahaja meningkatkan pengalaman pengguna, tetapi juga memaparkan butiran imej dengan lebih baik. Dalam artikel ini, kita akan belajar cara menggunakan JavaScript untuk melaksanakan kesan peti cahaya imej mudah.

Pertama, kita memerlukan halaman HTML untuk memaparkan imej. Di bawah ialah struktur HTML asas.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片灯箱</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <img src="image1.jpg" alt="Image 1" class="lightbox">
        <img src="image2.jpg" alt="Image 2" class="lightbox">
        <img src="image3.jpg" alt="Image 3" class="lightbox">
    </div>

    <div id="lightbox" class="hidden">
        <img src="" alt="Lightbox Image" id="lightbox-image">
        <span id="close-button">X</span>
    </div>

    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta bekas yang mengandungi tiga imej dan menambah kelas "peti cahaya" pada setiap imej. Kami juga mencipta div tersembunyi untuk memaparkan imej yang diperbesarkan, dengan id "peti cahaya". Dalam div ini, kami menambah imej kosong dan butang tutup.

Seterusnya, kita perlu mencipta beberapa gaya CSS untuk mencapai kesan peti cahaya imej. Cipta fail bernama style.css dan tambah gaya berikut:

.container {
    display: flex;
}

.lightbox {
    cursor: pointer;
    width: 200px;
    height: 200px;
}

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    z-index: 9999;
}

#lightbox img {
    width: 80%;
    max-height: 80%;
    margin-bottom: 20px;
}

#close-button {
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}

Salin selepas log masuk

Dalam gaya CSS di atas, kami menggayakan bekas dan imej supaya ia boleh dipaparkan dalam grid pada halaman. Kami juga mentakrifkan gaya yang dipanggil "peti cahaya" yang digunakan untuk melaraskan reka letak dan warna latar belakang apabila imej dibesarkan. Akhir sekali, kami menetapkan gaya untuk imej yang diperbesarkan dan gaya untuk butang tutup.

Kini, kita boleh mula menulis kod JavaScript. Cipta fail bernama script.js dalam direktori yang sama dengan fail HTML dan tambahkan kod berikut:

// 获取所有的图片元素
var lightboxImages = document.getElementsByClassName("lightbox");

// 获取放大图片和关闭按钮元素
var lightbox = document.getElementById("lightbox");
var lightboxImage = document.getElementById("lightbox-image");
var closeButton = document.getElementById("close-button");

// 绑定点击事件，显示放大图片
for (var i = 0; i < lightboxImages.length; i++) {
    lightboxImages[i].addEventListener("click", function() {
        var imageSource = this.getAttribute("src");
        lightboxImage.setAttribute("src", imageSource);
        lightbox.classList.remove("hidden");
    });
}

// 绑定点击事件，隐藏放大图片
closeButton.addEventListener("click", function() {
    lightbox.classList.add("hidden");
});

Salin selepas log masuk

Dalam kod JavaScript di atas, kami mula-mula mendapatkan semua elemen imej dengan kelas "peti cahaya" melalui kaedah getElementsByClassName. Seterusnya, kami mendapat elemen untuk imej zum dan butang tutup. Kemudian, kami menggunakan gelung untuk mengikat peristiwa klik pada setiap imej Apabila pengguna mengklik pada imej, alamat sumber imej ditetapkan kepada alamat imej yang diperbesarkan dan gaya tersembunyi bagi imej yang diperbesarkan dialih keluar. Akhir sekali, kami mengikat acara klik butang tutup dan menambah gaya tersembunyi untuk membesarkan imej apabila pengguna mengklik butang tutup.

Kini, kita boleh membuka fail HTML dalam penyemak imbas, klik pada imej, dan melihat kesan imej yang dibesarkan dan dipaparkan di tengah halaman. Apabila butang tutup diklik, imej yang diperbesarkan akan disembunyikan.

Di atas ialah kod sampel untuk menggunakan JavaScript untuk mencapai kesan peti cahaya imej. Anda boleh mengubah suai dan mengembangkannya mengikut keperluan anda sendiri untuk mencipta kesan peti cahaya gambar yang lebih kompleks dan pelbagai. Saya berharap anda berjaya dalam mencapai ini!

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk mencapai kesan peti cahaya imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!