Page renderings implemented by javascript

JavaScript is a dynamic programming language widely used in front-end development and can achieve many interesting page effects. The following will introduce several common and practical JavaScript page renderings.

1. Carousel chart effect

Carousel chart is a classic page effect, usually used to display specific content on the page. In JavaScript, you can use timers, CSS styles, DOM operations and other technologies to achieve carousel effects. The following is a simple carousel chart implementation example:

HTML code:

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

CSS code:

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

JavaScript code:

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. Scroll Loading effect

Page content that is too long may cause the page to load slowly, and the scrolling loading effect can solve this problem by loading new content when the page scrolls to the bottom. In JavaScript, you can use the Document Object Model (DOM) and event listeners to achieve the scrolling loading effect by monitoring page scroll events. The following is a simple rolling loading implementation example:

HTML code:

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

CSS code:

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

JavaScript code:

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 effect

A modal box is a pop-up box that is usually used to prompt the user to perform certain operations or display specific information. In JavaScript, you can use DOM operations, style controls, and event listeners to achieve modal box effects. The following is a simple modal box implementation example:

HTML code:

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

CSS code:

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

JavaScript code:

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

The above are three A common and practical method to implement page renderings using JavaScript. Through learning and practice, you can make the page effect richer and more vivid.

The above is the detailed content of Page renderings implemented by javascript. For more information, please follow other related articles on the PHP Chinese website!