jQuery实现带有洗牌效果的动画分页实例

首先让我们来理解一下这个问题的背景和要求。

背景：

现代网站中要求使用分页功能来展示大量数据。然而，单调的翻页效果会显得呆板，缺乏吸引力。因此，我们可以考虑使用带有动画效果的分页实例来增强用户体验。

要求:

本题要求我们使用jQuery来实现一个带有洗牌效果的动画分页实例。需要考虑用户界面的美观度和代码优雅性。

接下来我们开始讲解具体的实现方法。我们需要分为以下步骤来完成：

HTML

首先在我们的HTML页面中，需要添加以下HTML代码结构：

<div class="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

<div class="pagination">
  <ul>
  </ul>
</div>

其中，每一个 .item 类表示一个页面项目，.wrapper 类是一个容器，.pagination类表示我们的分页容器。

接下来我们需要使用CSS来美化页面，并启动动画分页。

.wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.item{
  width: 150px;
  height: 150px;
  font-size: 50px;
  line-height: 150px;
  border: 1px solid #000;
  margin: 10px;
  text-align: center;
}
.pagination {
  display: flex;
  justify-content: center;
}
.pagination li {
  list-style: none;
  margin: 0 5px;
  cursor: pointer;
  color: #000;
}
.pagination li.active {
  font-weight: bold;
}

其中.wrapper 和 .item 的 CSS 分别用于定义分页容器和分页项目的样式。.pagination 和 .pagination li 用于定义分页器的样式。

最后，我们需要使用 jQuery 来实现动画分页效果。JS 代码如下：

$(document).ready(function(){
  var itemsPerPage = 4;
  var currentPage = 1;
  var totalPages = Math.ceil($('.item').length / itemsPerPage);
  for(var i=1;i<=totalPages;i++){
    $('.pagination ul').append('<li class="page-link">'+ i +'</li>');
  }
  $('.pagination ul li:nth-child('+currentPage+')').addClass('active');
  $('.item').hide();
  $('.item').slice(0, itemsPerPage).show();
  $('.pagination li').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    var pageNumber = $(this).text();
    var firstItemIndex = (pageNumber - 1) * itemsPerPage;
    var lastItemIndex = firstItemIndex + itemsPerPage;
    $('.item').hide().slice(firstItemIndex, lastItemIndex).show();
    $('.item').hide().slice(firstItemIndex, lastItemIndex).shuffle().show();
  });
});

$.fn.shuffle = function() {
    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });
    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });
    return $(shuffled);
};

上述代码中，我们首先定义了每一页的 .item 项目数量 itemsPerPage 和当前页码 currentPage，然后利用 Math.ceil() 方法来计算出总页数 totalPages，再根据 totalPages 循环渲染出分页器。同时，我们给当前选中的第一页添加了一个 active 类。

点击分页器的时候，我们使用 .slice() 方法来截取分页器对应的 .item 项目，并使用我们自己写的 .shuffle() 方法来对选择的项目进行洗牌动画效果。通过最后显示页面中的分页项目，并使用 .show() 方法来显示动画效果。

完成以上三个步骤之后，我们的动画分页实例就可以在网页中显示啦。

下面来演示一个完整的实现和效果，实现越详细越好，以下代码摘自我的个人博客。

<!DOCTYPE html>
<html>
  <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .wrapper{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 800px;
      margin: 0 auto;
    }
    .item{
      width: 150px;
      height: 150px;
      font-size: 50px;
      line-height: 150px;
      border: 1px solid #000;
      margin: 10px;
      text-align: center;
    }
    .pagination ul{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .pagination li {
      list-style: none;
      margin: 0 5px;
      cursor: pointer;
      color: #000;
    }
    .pagination li.active {
      font-weight: bold;
    }
  </style>
  </head>
  <body>
    <h1>jQuery实现带有洗牌效果的动画分页实例</h1>
    <div class="wrapper">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
    </div>

    <div class="pagination">
      <ul>
      </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
    $(document).ready(function(){
      var itemsPerPage = 4;
      var currentPage = 1;
      var totalPages = Math.ceil($('.item').length / itemsPerPage);
      for(var i=1;i<=totalPages;i++){
        $('.pagination ul').append('<li class="page-link">'+ i +'</li>');
      }
      $('.pagination ul li:nth-child('+currentPage+')').addClass('active');
      $('.item').hide();
      $('.item').slice(0, itemsPerPage).show();
      $('.pagination li').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        var pageNumber = $(this).text();
        var firstItemIndex = (pageNumber - 1) * itemsPerPage;
        var lastItemIndex = firstItemIndex + itemsPerPage;
        $('.item').hide().slice(firstItemIndex, lastItemIndex).shuffle().show();
      });
    });

    $.fn.shuffle = function() {
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
        return $(shuffled);
    };
    </script>
  </body>
</html>

代码说明：

CSS部分用于自定义网页样式，主要包括 .wrapper、 .item 和 .pagination，样式用于设置内容模块、单元格以及分页器的样式。

HTML部分包括 .wrapper 和 .pagination，前者包含了1到10这十个数字，后者为空的列表。

JS部分绑定三个变量，分别是每页显示的实例、当前页数和总页数。在HTML被加载后，我们循环渲染出分页器，给第一页添加一个 active 类，隐藏静态实例。点击分页器相应的按钮时，能够通过计算对应分页器在 .wrapper 中的实例位置，显示出当前页，并具有动画效果。

演示：https://wxyblog.xyz/demo/pagination-shuffle.html

另外我也写了一篇关于此部分的详细解析，希望对你有所帮助：https://wxyblog.xyz/p/jquery-paging-shuffle.html

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现带有洗牌效果的动画分页实例 - Python技术站

jQuery实现带有洗牌效果的动画分页实例

相关文章