Rendus de page implémentés par javascript

JavaScript est un langage de programmation dynamique largement utilisé dans le développement front-end et peut réaliser de nombreux effets de page intéressants. Ce qui suit présentera plusieurs rendus de pages JavaScript courants et pratiques.

1. Effet carrousel

Carrousel est un effet de page classique, généralement utilisé pour afficher un contenu spécifique sur la page. En JavaScript, vous pouvez utiliser des minuteries, des styles CSS, des opérations DOM et d'autres technologies pour obtenir des effets de carrousel. Voici un exemple simple d'implémentation de carrousel :

Code 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>

Code 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;
}

Code 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. Effet de chargement par défilement

Un contenu de page excessivement long peut ralentir le chargement de la page, et l'effet de chargement par défilement peut résoudre ce problème en chargeant un nouveau contenu lorsque la page défile vers le bas. En JavaScript, vous pouvez utiliser le modèle objet de document (DOM) et les écouteurs d'événements pour obtenir l'effet de chargement par défilement en surveillant les événements de défilement de page. Voici un exemple simple d'implémentation de chargement progressif :

Code HTML :

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

Code CSS :

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

Code 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. Effet boîte modale

Une boîte modale est une boîte contextuelle qui est généralement utilisée pour inviter l'utilisateur à effectuer certaines opérations ou à afficher des informations spécifiques. En JavaScript, vous pouvez utiliser des opérations DOM, des contrôles de style et des écouteurs d'événements pour obtenir des effets de boîte modale. Voici un exemple simple d'implémentation de boîte modale :

Code 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>

Code 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;
}

Code 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();

# 🎜🎜#Voici trois méthodes JavaScript courantes et pratiques pour implémenter les rendus de pages. Grâce à l'apprentissage et à la pratique, vous pouvez rendre l'effet de page plus riche et plus vivant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!