Gunakan JavaScript untuk mencapai kesan penukaran gelongsor halaman-tutorial js-php.cn

Gunakan JavaScript untuk mencapai kesan penukaran gelongsor halaman

王林

Lepaskan： 2023-08-09 13:57:15

asal

2067 orang telah melayarinya

Gunakan JavaScript untuk mencapai kesan penukaran gelongsor halaman

Dalam reka bentuk halaman web moden, kesan penukaran gelongsor halaman telah menjadi keperluan reka bentuk biasa, yang boleh meningkatkan pengalaman pengguna dan meningkatkan interaktiviti halaman. Artikel ini akan mencapai kesan ini melalui JavaScript.

Pertama, kita perlu menambah beberapa struktur asas dan penggayaan pada HTML. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
    <title>页面滑动切换效果</title>
    <style>
        .page {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
    <div class="page" id="page1">
        <h1>页面1</h1>
    </div>
    <div class="page" id="page2">
        <h1>页面2</h1>
    </div>
    <div class="page" id="page3">
        <h1>页面3</h1>
    </div>

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

Salin selepas log masuk

Dalam gaya CSS, kami mentakrifkan kelas yang dipanggil "halaman" yang mempunyai kedudukan mutlak dan tidak kelihatan secara lalai. Kami menambah tiga elemen halaman dalam HTML dan menetapkan id mereka masing-masing.

Seterusnya, kami akan menggunakan JavaScript untuk melaksanakan kesan pensuisan gelongsor halaman. Buat fail yang dipanggil "script.js" dan masukkannya dalam HTML.

Dalam fail skrip, kami akan menggunakan JavaScript untuk mengawal paparan dan penyembunyian halaman, dan mencapai kesan gelongsor dengan menambahkan gaya CSS.

document.addEventListener("DOMContentLoaded", function() {
    var pages = document.querySelectorAll(".page");
    var currentPage = 0;
    var isAnimating = false;

    // 初始化当前页面
    pages[currentPage].style.display = "block";

    document.addEventListener("wheel", function(event) {
        if (isAnimating) return;

        // 向下滚动
        if (event.deltaY > 0) {
            nextPage();
        }
        // 向上滚动
        else {
            prevPage();
        }
    });

    function nextPage() {
        if (currentPage < pages.length - 1) {
            isAnimating = true;

            // 当前页面向上移动
            pages[currentPage].classList.add("move-up");

            // 下一页显示
            setTimeout(function() {
                pages[currentPage].style.display = "none";
                currentPage++;
                pages[currentPage].style.display = "block";
                pages[currentPage].classList.add("move-up");

                // 动画完成后移除样式
                setTimeout(function() {
                    pages[currentPage].classList.remove("move-up");
                    isAnimating = false;
                }, 1000);
            }, 1000);
        }
    }

    function prevPage() {
        if (currentPage > 0) {
            isAnimating = true;

            // 当前页面向下移动
            pages[currentPage].classList.remove("move-up");

            // 上一页显示
            setTimeout(function() {
                pages[currentPage].style.display = "none";
                currentPage--;
                pages[currentPage].style.display = "block";
                pages[currentPage].classList.remove("move-up");
                isAnimating = false;
            }, 1000);
        }
    }
});

Salin selepas log masuk

Dalam JavaScript, kami mula-mula mendapatkan semua elemen halaman dan memulakan halaman semasa sebagai halaman pertama. Seterusnya, kami menambah pendengar acara roda tetikus untuk menukar halaman.

Apabila menatal ke bawah, kami memanggil fungsi nextPage(), yang akan menyembunyikan halaman semasa dan menunjukkan halaman seterusnya. Kami menggunakan kesan animasi CSS untuk meluncur halaman semasa ke atas, dan menambah kelewatan untuk memastikan halaman seterusnya dipaparkan selepas animasi selesai. Akhir sekali, kami mengalih keluar gaya CSS yang sepadan selepas animasi selesai.

Apabila menatal ke atas, kami memanggil fungsi prevPage(), yang akan menyembunyikan halaman semasa dan menunjukkan halaman sebelumnya. Begitu juga, kami menggunakan kesan animasi CSS untuk meluncurkan halaman semasa ke bawah dan memaparkan halaman sebelumnya selepas animasi selesai.

Akhir sekali, kami menambah gaya berikut dalam CSS:

.move-up {
    transform: translateY(-100%);
    transition: transform 1s;
}

Salin selepas log masuk

Gaya ini akan menjadikan elemen halaman meluncur ke atas 100% dengan masa animasi selama 1 saat.

Melalui contoh kod di atas, kami berjaya menggunakan JavaScript untuk mencapai kesan penukaran gelongsor halaman. Anda boleh mengubah suai dan mengembangkannya mengikut keperluan sebenar untuk mencapai kesan yang lebih diperibadikan.

Atas ialah kandungan terperinci Gunakan JavaScript untuk mencapai kesan penukaran gelongsor halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!