原生js实现带运动的分页效果

最新推荐文章于 2024-07-01 11:34:43 发布

della_uii

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： javascript 分页

本文链接：https://blog.csdn.net/Della_UI/article/details/53522639

版权

本文介绍如何使用原生JavaScript结合Move.js框架，实现带有动态运动效果的分页功能。当切换页码时，课程元素会通过动画依次进出，提供更丰富的用户体验。详细步骤包括分页效果的实现、运动效果的添加，以及在点击页码时如何协调动画顺序。

摘要由CSDN通过智能技术生成

本例最终效果如下图，当切换页码时，本页码内所有课程将从最后一个课程开始依次运动到底部中间的位置并消失，然后新页码内的课程依次从底部中间的位置运动到原始位置。
这里写图片描述

首先实现分页效果，然后将运动和分页结合。
分页效果图如下图中的③或④所示：
js分页

下面将以什么情况出现首页-什么情况出现上一页-五个页码不同排布情况-什么情况出现下一页-什么情况出现尾页-总页码提示-点击页码进行切换的思路实现该分页效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                margin: 0 5px;
                color: #333;
            }
            #div1{
                width: 480px;
                margin: 200px auto;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
    
                page({

                    id:'div1',
                    nowNum:8,  //默认为1
                    allNum:16,  //默认为5
                    callback:function(now,all){
      //传入两个参数：当前页和总页数
                        alert(now+'/'+all);
                    }

                })
            }

            //封装好的分页函数
            function page(opt){
    

                //判断调用时是否传入id，只在传入id的情况下使用该分页函数
                if (!opt.id) {
                    return false;
                }

                var obj=document.getElementById(opt.id);
                var nowNum=opt.nowNum || 1;  //当前页，默认1
                var allNum=opt.allNum || 5;  //总页码，默认5

                //看回调函数是否存在，如果存在就直接赋值，不存在则默认空
                var callback=opt.callback || function(){
    };

                //首页，仅在当前页大于等于4 且 总页码大于等于6的情况下出现‘首页’，图①
                if (nowNum>=4 && allNum>=6) {
                    var oA=document.createElement('a');
                    oA.href='#1';
                    oA.innerHTML='首页';
                    obj.appendChild(oA);
                }

                //上一页，在当前页大于等于2的情况下出现‘上一页’，图②
                if (nowNum>=2) {
                    var oA=document.createElement('a');
                    oA.href='#'+(nowNum-1);
                    oA.innerHTML='上一页';
                    obj.appendChild(oA);
                }

                //5个页码，分两种情况，一是总页码小于等于5，二是总页码大于5，图③和④
                if (allNum<=5) {  //总页码小于等于5

                    for (var i=1; i<=allNum; i++) {
                        var oA=document.createElement('a');
                        oA.href='#'+i;
                        if (nowNum==i) {  //当前页页码不加[]
                            oA.innerHTML=i;
                        }else{
                            oA.innerHTML=