자바스크립트로 구현된 페이지 렌더링

JavaScript는 프런트 엔드 개발에 널리 사용되는 동적 프로그래밍 언어이며 많은 흥미로운 페이지 효과를 얻을 수 있습니다. 다음은 몇 가지 일반적이고 실용적인 JavaScript 페이지 렌더링을 소개합니다.

1. 회전판 효과

회전판은 일반적으로 페이지에 특정 콘텐츠를 표시하는 데 사용되는 고전적인 페이지 효과입니다. JavaScript에서는 타이머, CSS 스타일, DOM 작업 및 기타 기술을 사용하여 회전판 효과를 얻을 수 있습니다. 다음은 간단한 회전식 차트 구현 예입니다.

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>

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

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. 스크롤 로딩 효과

과도한 페이지 콘텐츠로 인해 페이지 로딩이 느려질 수 있으며, 스크롤 로딩 효과는 페이지가 아래쪽으로 스크롤될 때 새로운 콘텐츠를 로딩함으로써 이 문제를 해결할 수 있습니다. JavaScript에서는 DOM(문서 개체 모델) 및 이벤트 리스너를 사용하여 페이지 스크롤 이벤트를 모니터링하여 스크롤 로딩 효과를 얻을 수 있습니다. 다음은 간단한 롤링 로딩 구현 예입니다.

HTML 코드:

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

CSS 코드:

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

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. 모달 상자 효과

모달 상자는 일반적으로 프롬프트에 사용되는 팝업 상자입니다. 사용자는 특정 작업을 수행하거나 특정 정보를 표시합니다. JavaScript에서는 DOM 작업, 스타일 컨트롤 및 이벤트 리스너를 사용하여 모달 상자 효과를 얻을 수 있습니다. 다음은 간단한 모달 상자 구현 예입니다.

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>

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

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

위는 페이지 렌더링을 구현하는 세 가지 일반적이고 실용적인 JavaScript 방법입니다. 학습과 연습을 통해 페이지 효과를 더욱 풍부하고 생생하게 만들 수 있습니다.

위 내용은 자바스크립트로 구현된 페이지 렌더링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!