Page renderings implemented by javascript-Front-end Q&A-php.cn

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:

Copy after login

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

Copy after login

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

Copy after login

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:

  第一段文本内容
 第二段文本内容
 第三段文本内容
 第四段文本内容
 ...

Copy after login

CSS code:

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

Copy after login

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

Copy after login

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:

    模态框内容

Copy after login

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

Copy after login

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

Copy after login

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!