Paparan halaman dilaksanakan oleh javascript

JavaScript ialah bahasa pengaturcaraan dinamik yang digunakan secara meluas dalam pembangunan bahagian hadapan dan boleh mencapai banyak kesan halaman yang menarik. Berikut akan memperkenalkan beberapa pemaparan halaman JavaScript yang biasa dan praktikal.

1. Kesan karusel

Karusel ialah kesan halaman klasik, biasanya digunakan untuk memaparkan kandungan tertentu pada halaman. Dalam JavaScript, anda boleh menggunakan pemasa, gaya CSS, operasi DOM dan teknologi lain untuk mencapai kesan karusel. Berikut ialah contoh pelaksanaan carta karusel mudah:

Kod HTML:

<div class="carousel-img">
    <img src="img1.jpg" alt="图片1" class="active">
    <img src="img2.jpg" alt="图片2">
    <img src="img3.jpg" alt="图片3">
    <img src="img4.jpg" alt="图片4">
    <div class="carousel-nav">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

Kod CSS:

.carousel-img {
    position: relative;
}
.carousel-img img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .5s;
}
.carousel-img img.active {
    opacity: 1;
}
.carousel-nav {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}
.carousel-nav span {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #ccc;
    transition: background-color .5s;
}
.carousel-nav span.active {
    background-color: #f00;
}

Kod JavaScript:

function carouselImg() {
    var imgs = document.querySelectorAll('.carousel-img img');
    var len = imgs.length;
    var i = 0;
    setInterval(function() {
        i++;
        if (i >= len) {
            i = 0;
        }
        for (var j = 0; j < len; j++) {
            imgs[j].classList.remove('active');
            document.querySelectorAll('.carousel-nav span')[j].classList.remove('active');
        }
        imgs[i].classList.add('active');
        document.querySelectorAll('.carousel-nav span')[i].classList.add('active');
    }, 3000);
}
carouselImg();

2. Skrol Memuatkan kesan

Kandungan halaman yang terlalu panjang boleh menyebabkan halaman dimuatkan dengan perlahan dan kesan pemuatan menatal boleh menyelesaikan masalah ini dengan memuatkan kandungan baharu apabila halaman menatal ke bawah. Dalam JavaScript, anda boleh menggunakan Model Objek Dokumen (DOM) dan pendengar acara untuk mencapai kesan pemuatan tatal dengan memantau acara tatal halaman. Berikut ialah contoh pelaksanaan rolling loading yang mudah:

Kod HTML:

<div class="scroll-container">
    <div class="scroll-content">
        <p>第一段文本内容</p>
        <p>第二段文本内容</p>
        <p>第三段文本内容</p>
        <p>第四段文本内容</p>
        ...
    </div>
</div>

Kod CSS:

.scroll-container {
    height: 400px;
    overflow: auto;
}
.scroll-content {
    height: 1000px;
}

Kod JavaScript:

function onScrollLoad() {
    var container = document.querySelector('.scroll-container');
    container.addEventListener('scroll', function() {
        if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
            // 加载新内容
            var content = document.querySelector('.scroll-content');
            var p = document.createElement('p');
            p.innerHTML = '新段落文本内容';
            content.appendChild(p);
        }
    });
}
onScrollLoad();

3. Modal Box kesan

Kotak modal ialah kotak timbul yang biasanya digunakan untuk menggesa pengguna melakukan operasi tertentu atau memaparkan maklumat tertentu. Dalam JavaScript, anda boleh menggunakan operasi DOM, kawalan gaya dan pendengar acara untuk mencapai kesan kotak modal. Berikut ialah contoh pelaksanaan kotak modal mudah:

Kod HTML:

<button id="open-modal">打开模态框</button>
<div class="modal" style="display: none;">
    <div class="modal-content">
        <button id="close-modal">关闭</button>
        <p>模态框内容</p>
    </div>
</div>

Kod CSS:

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
}

Kod JavaScript:

function modalEffect() {
    var openBtn = document.querySelector('#open-modal');
    var closeBtn = document.querySelector('#close-modal');
    var modal = document.querySelector('.modal');
    openBtn.addEventListener('click', function() {
        modal.style.display = 'block';
    });
    closeBtn.addEventListener('click', function() {
        modal.style.display = 'none';
    });
}
modalEffect();

Di atas adalah tiga Kaedah biasa dan praktikal untuk melaksanakan pemaparan halaman menggunakan JavaScript. Melalui pembelajaran dan latihan, anda boleh menjadikan kesan halaman lebih kaya dan lebih jelas.

Atas ialah kandungan terperinci Paparan halaman dilaksanakan oleh javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!