找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发javaScript分页效果

2018-11-29 22:37:48 分类：JavaScript 阅读(131) 评论(0)
前端开发浏览器的兼容性
前端开发 浏览器
前端开发要注意的浏览器兼容性

html 代码

    <head>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            ul,
            li {
                list-style: none;
            }
            .left {
                float: left;
            }
            .right {
                float: left;
            }
            .page_container {
                height: 30px;
                line-height: 30px;
                width: 510px;
                overflow: hidden;
                text-align: center;
                padding: 30px 0;
                color: #757575;
            }
            .page_num_container {
                width: 301px;
                margin: 0 10px;
                border: 1px solid #ccc;
                border-right: 0;
                box-sizing: border-box;
                overflow: hidden;
                position: relative;
                height: 32px;
            }
            .page_num_container ul {
                position: absolute;
                top: 0;
            }
            .page_num_container ul li {
                float: left;
                width: 30px;
                border-right: 1px solid #ccc;
                box-sizing: border-box;
                text-align: center;
                cursor: pointer;
            }
            .page_num_container ul li:hover,
            .page_num_container ul li.active {
                background: #f4a100;
                color: #fff;
            }
            .page_btn {
                width: 60px;
                border: 1px solid #ccc;
                box-sizing: border-box;
                cursor: pointer;
            }
            .page_btn:hover {
                background: #f4a100;
                color: #fff;
            }
            .all_page:hover {
                background: none;
                color: #757575;
            }
            .prev_btn {
                margin-right: 10px;
            }
        </style>
        <script src=”http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js”></script>
    </head>
    <body>
        <!– 页码 –>
        <div class=”page_container center”>
            <div class=”page_btn prev_page left”>上一页</div>
            <div class=”page_num_container left” id=”page_num_container”>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                </ul>
            </div>
            <div class=”page_btn next_page left”>下一页</div>
            <div class=”page_btn all_page right”>共21页</div>
        </div>
        <!– 页码 –>
        <script>
            function page() {
                var contain = $(“.page_num_container”);
                var ul = contain.children(“ul”);
                var li = ul.children(“li”);
                var length = li.length;
                var index = 0;
                var leftIndex = 0;
                var prev_btn = contain.siblings(“.prev_page”);
                var next_btn = contain.siblings(“.next_page “);
                ul.css(“width”, li.outerWidth() * length);
                change_page(index);
                function change_page(eqindex) {
                    if (eqindex < 0)
                    {
                        index = 0;
                    }
             else if (eqindex >= length) {
                        index = length – 1;
                    }
                    if (index – 4 <= 0) {
                        leftIndex = 0;
                    }
             else if (index > length – 10)
                    {
                        leftIndex = Math.ceil(length / 2);
                    }
             else {
                        leftIndex = index – 4;
                    }
                    ul.animate({ “left”: “-” + leftIndex * li.outerWidth() + “px” }, 200);
                    li.eq(index).addClass(“active”).siblings(li).removeClass(“active”);
                }
                prev_btn.click(function () {
                    index = index – 1;
                    change_page(index);
                }) < br />
                    next_btn.click(function () {
                        index = index + 1;
                        change_page(index);
                    }) < br />
                    li.click(function () {
                        index = $(this).index();
                        change_page(index);
                    }) < br />
             }
            page() < br />
        </script>
    </body>
</html>
前端开发浏览器兼容集合
前端开发那个浏览器兼容性好
浏览器 前端开发
» 本文来自：前端开发者 » 《前端开发javaScript分页效果》
» 本文链接地址：https://www.rokub.com/6856.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论