关闭

js分页实例

标签: 分页js分页js分页实例
180人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {margin: 0;padding: 0}
    #page {width: 100%;text-align: center;}
    #page a {margin: 10px;}
    #ul1 { width: 600px; list-style: none; height: 240px;background: #0cf;margin: 10px auto;position: relative;}
    #ul1 li { width: 100px;height: 100px;background: red;margin: 10px;float: left; }
    </style>
    <script type="text/javascript" src="startMove.js" ></script>
    <script type="text/javascript">
    window.onload = function () {
        var arr =[];
        var iNow = 9;

        var json = {
            title : [
                'title1',
                'title2',
                'title3',
                'title4',
                'title5',
                'title6',
                'title7',
                'title8',
                'title9',
                'title10',
                'title11',
                'title12',
                'title13',
                'title14',
                'title15',
                'title16',
                'title17',
                'title18',
                'title19',
                'title20',
                'title21',
                'title22',
                'title23',
                'title24',
                'title25',
                'title26',
                'title27',
                'title28',
                'title29',
                'title30',
                'title31',
                'title32',
                'title33',
                'title34',
                'title35'
            ]
        }


        page({
            id : 'page',
            nowNum : 1,
            allNum : Math.ceil(json.title.length/10),
            callBack : function(now,all) {
                console.log('当前页 :'+ now +',共'+all)
                var num = now*10 < json.title.length ? 10 : json.title.length -(now-1)*10;  //每一页多少条
                var oUl = document.getElementById('ul1');
                var aLi = oUl.getElementsByTagName('li');

                if (oUl.innerHTML == '') {
                    for (var i = 0; i < num; i++) {
                        var oLi = document.createElement('li');
                        oLi.innerHTML = json.title[(now-1)*10+i];
                        oUl.appendChild(oLi);

                    }
                    for (var i = 0; i < aLi.length; i++) {
                        arr.push( [aLi[i].offsetLeft , aLi[i].offsetTop] );

                    };
                    for (var i = 0; i < aLi.length; i++) {
                        aLi[i].style.position = 'absolute';
                        aLi[i].style.left = arr[i][0] + 'px';
                        aLi[i].style.top = arr[i][1] + 'px';
                        aLi[i].style.margin = 0;
                    };
                } else {
                    var timer1 = setInterval(function() {
                        startMove(aLi[iNow],{ 'left' : 200,'top' : 250, 'opacity' : 0 });
                        if (iNow <= 0) {
                            clearInterval(timer1);
                            iNow = num - 1;

                            for (var i = 0; i < num; i++) {
                                aLi[i].innerHTML = json.title[(now-1)*10+i]
                            };
                            var timer2 = setInterval(function() {
                                startMove(aLi[iNow] , { 'left' : arr[iNow][0], 'top' : arr[iNow][1], 'opacity' : 100 });
                                if (iNow <= 0) {
                                    clearInterval(timer2);
                                        iNow = num - 1;  //之前的iNow == 0了
                                }else{
                                    iNow--;
                                }

                            },100)
                        }else{
                            iNow--;
                        }

                    },100 );
                }
            }
        })

    }
    function page(opt) {
            if (!opt.id) {return};
            var nowNum = opt.nowNum || 1;
            var allNum = opt.allNum || 5;

            var callBack = opt.callBack || function(){};
            var obj = document.getElementById(opt.id);

            if (allNum >= 6 && nowNum >=5) {
                var a = document.createElement('a');
                a.href = '#1';
                a.innerHTML = '首页';
                obj.appendChild(a)
            };

            if (nowNum >= 2) {
                var a = document.createElement('a');
                a.href = '#'+(nowNum-1);
                a.innerHTML = '上一页';
                obj.appendChild(a)
            };

            if (allNum <= 5) {

                for (var i = 1; i <= allNum; i++) {
                    var a = document.createElement('a');
                    a.href = '#'+i;
                    if (i == nowNum) {
                        a.innerHTML = i;
                    } else {
                        a.innerHTML = '['+ i +']'
                    }

                    obj.appendChild(a)
                };

            }else {
                if (nowNum ==1 || nowNum == 2) {

                        for (var i = 1; i <= 5; i++) {
                            var a = document.createElement('a');
                            a.href = '#'+i;
                            if (i == nowNum) {
                                a.innerHTML = i;
                            } else {
                                a.innerHTML = '['+ (i) +']'
                            }

                            obj.appendChild(a)
                        };


                }
                else if(  (allNum - nowNum) <= 1 ) {    //opt.nowNum ==9 || opt.nowNum == 10
                    for (var i = 1; i <= 5; i++) {
                        var a = document.createElement('a');
                        a.href = '#' + (allNum - 5 + i);
                        if( (allNum-nowNum == 0 && i==5) || (allNum - nowNum == 1 && i==4) ){
                            a.innerHTML = (allNum - 5 + i);
                        }else{
                             a.innerHTML = '['+ (allNum - 5 + i) +']';
                        }

                        obj.appendChild(a)
                    };

                }
                else {
                    for (var i = 1; i <= 5; i++) {
                        var a = document.createElement('a');
                        a.href = '#'+(nowNum-3+i);
                        if (i == 3) {
                            a.innerHTML = nowNum-3+i;
                        } else {
                            a.innerHTML = '['+ (nowNum-3+i) +']'
                        }

                        obj.appendChild(a)
                    };
                }

            }

            if ((allNum-nowNum) >= 1) {
                var a = document.createElement('a');
                a.href = '#'+(nowNum+1);
                a.innerHTML = '下一页';
                obj.appendChild(a)
            };
            if (allNum >= 6 && (allNum-nowNum) >=3 ) {
                var a = document.createElement('a');
                a.href = '#'+allNum;
                a.innerHTML = '尾页';
                obj.appendChild(a)
            };

            callBack(nowNum,allNum);



            var aBtn = obj.getElementsByTagName('a');
            for (var i = 0; i < aBtn.length; i++) {
                aBtn[i].onclick = function() {
                    var nowNum = parseInt(this.getAttribute('href').substring(1));

                    obj.innerHTML = '';
                    page({

                     id : opt.id,
                     nowNum : nowNum,
                     allNum : allNum,
                     // bBtn : true,
                     callBack : callBack

                    });
                    // callBack(nowNum,allNum);
                    return false;
                }

            };
        }
    </script>
</head>
<body>
<ul id="ul1"></ul>
<div id="page"></div>
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:25540次
    • 积分:850
    • 等级:
    • 排名:千里之外
    • 原创:61篇
    • 转载:8篇
    • 译文:0篇
    • 评论:1条