CSS3等相关属性制作分页导航实现代码

下面我将为您详细讲解“CSS3等相关属性制作分页导航实现代码”的完整攻略。

1. 布局设计

首先，我们需要为分页导航设计一个基本的布局。一般情况下，我们可以采用<ul> <li>标签组合的方式来实现分页导航，如下所示：

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

2. 样式设计

接下来，我们需要为这个布局添加一些样式。这里我们主要使用了CSS3的一些新属性，如border-radius、box-shadow、text-shadow等，来美化分页导航，让它更加美观。下面是一个示例样式：

/* 分页导航样式 */
.pagination {
  list-style: none;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.pagination li {
  display: inline-block;
  font-size: 16px;
  line-height: 30px;
  margin-right: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,.3);
  cursor: pointer;
}

.pagination li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #333;
  text-decoration: none;
  text-shadow: 1px 1px 1px #fff;
}

.pagination li.active {
  border-color: #007bff;
  background-color: #007bff;
  box-shadow: 0 0 4px rgba(0,123,255,.3);
}

.pagination li.active a {
  color: #fff;
}

3. JS交互制作

最后，我们需要使用JavaScript来为分页导航添加一些交互效果，比如点击切换页码时，高亮显示当前页码，同时更新相关数据等。下面是一个示例代码：

var pagination = document.querySelector('.pagination');
var list = pagination.querySelectorAll('li');

for (var i = 0; i < list.length; i++) {
  list[i].addEventListener('click', function() {
    for (var j = 0; j < list.length; j++) {
      list[j].classList.remove('active');
    }
    this.classList.add('active');
    // TODO: 更新相关数据
  });
}

示例说明

下面给出两个分页导航的示例说明：

示例1

假设我们要实现一个类似于淘宝分页导航的效果，即只显示前后几个页码和省略号，其他页码通过点击“下一页”或“上一页”来切换。具体代码如下：

HTML：

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">...</a></li>
  <li><a href="#">10</a></li>
  <li><a href="#">»</a></li>
</ul>

JS：

var pagination = document.querySelector('.pagination');
var list = pagination.querySelectorAll('li');
var currentPage = 1;  // 当前页码
var totalPage = 10;  // 总页数
var showPage = 5;  // 显示页码数

initPage();

function initPage() {
  // 初始化页码
  updatePage(1);
  // 点击事件
  for (var i = 0; i < list.length; i++) {
    list[i].addEventListener('click', function() {
      var page = parseInt(this.querySelector('a').innerHTML);
      switch (page) {
        case 1:  // 第一页
          if (currentPage == 1) {
            return;
          }
          updatePage(1);
          break;
        case '...':  // 省略号
          break;
        case totalPage:  // 最后一页
          if (currentPage == totalPage) {
            return;
          }
          updatePage(totalPage);
          break;
        default:  // 其他页码
          if (page == currentPage) {
            return;
          }
          if (page > showPage && page < totalPage) {
            updatePage('...', page);
          } else {
            updatePage(page);
          }
          break;
      }
    });
  }
}

function updatePage(page, active) {
  for (var j = 0; j < list.length; j++) {
    var a = list[j].querySelector('a');
    if (a.innerHTML === '...') {
      continue;
    }
    if (typeof page == 'string' && page === '...') {
      var ellipsis = list[j];
      list[j].style.display = 'none';
    } else {
      if (active) {
        currentPage = page;
      }
      if (page === '...') {
        if (j > showPage && j < totalPage - 1) {
          if (list[j].style.display == 'none') {
            list[j].style.display = 'inline-block';
          }
        } else {
          if (list[j].style.display != 'none') {
            list[j].style.display = 'none';
          }
        }
      } else {
        list[j].style.display = 'inline-block';
        a.innerHTML = page;
        if (page == currentPage) {
          list[j].classList.add('active');
        } else {
          list[j].classList.remove('active');
        }
      }
    }
  }
}

CSS：

.pagination {
  list-style: none;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.pagination li {
  display: inline-block;
  font-size: 16px;
  line-height: 30px;
  margin-right: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,.3);
  cursor: pointer;
}

.pagination li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #333;
  text-decoration: none;
  text-shadow: 1px 1px 1px #fff;
}

.pagination li.active {
  border-color: #007bff;
  background-color: #007bff;
  box-shadow: 0 0 4px rgba(0,123,255,.3);
}

.pagination li.active a {
  color: #fff;
}

示例2

假设我们要实现一个类似于微博分页导航的效果，即显示所有页码，同时高亮显示当前页码，具体代码如下：