How to use CSS Positions layout to achieve paging effect

How to use CSS Positions layout to achieve paging effect

In web design, paging effect is a common layout method used to divide content into multiple pages , and provide navigation functions. CSS Positions is a layout method of CSS that can help us achieve paging effects. This article will introduce in detail how to use CSS Positions layout to achieve paging effect, and give specific code examples.

1. Basic layout

First, we need to create a basic HTML structure, including content containers and navigation controls. The code is as follows:

<div class="content">
  <div class="page">第一页内容</div>
  <div class="page">第二页内容</div>
  <div class="page">第三页内容</div>
</div>
<div class="pagination">
  <button class="prev">上一页</button>
  <button class="next">下一页</button>
</div>

In the above code, the content container is wrapped with <div class="content">, and the content of each page is wrapped with &lt ;div class="page"> to represent. The navigation control is wrapped using <div class="pagination">, and the previous page and next page are wrapped using <button class="prev"> and ## respectively. # means.

2.CSS layout

Next, we need to use CSS Positions layout to achieve the paging effect. The code is as follows:

.content {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.pagination {
  text-align: center;
  margin-top: 10px;
}

.prev, .next {
  margin: 0 10px;
}

In the above code, we set

position: relative; for the content container and limit the width and height, while passing overflow: hidden ;Hide the portion that exceeds the container size.

The content of each page is positioned using

position: absolute;, and placed in the upper left corner of the container through top: 0; left: 0;. At the same time, in order to achieve the page switching effect, we use the transition attribute of CSS animation.

The navigation control uses text centering and top and bottom spacing style settings.

JavaScript interaction

Finally, we need to use JavaScript to implement the interactive logic of the paging effect. The specific code is as follows:

var content = document.querySelector('.content');
var pages = document.querySelectorAll('.page');
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');
var currentPage = 0;

prevBtn.addEventListener('click', function() {
  if (currentPage > 0) {
    currentPage--;
    content.style.transform = 'translateX(' + (currentPage * -100) + '%)';
  }
});

nextBtn.addEventListener('click', function() {
  if (currentPage < pages.length - 1) {
    currentPage++;
    content.style.transform = 'translateX(' + (currentPage * -100) + '%)';
  }
});

In the above code, we first obtain the content container, the content of each page, the previous page and next page buttons, and a variable

currentPage to represent The current page number.

Then, we use the

addEventListener method to bind click events to the previous page and next page buttons, and update the value of currentPage in the event handler function, And achieve the page switching effect by setting content.style.transform.

Through the above HTML, CSS and JavaScript codes, we successfully used CSS Positions layout to achieve the paging effect.

The above is the detailed content of How to use CSS Positions layout to achieve paging effect. For more information, please follow other related articles on the PHP Chinese website!