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

前端开发页脚翻页代码

2018-12-16 分类：JavaScript 阅读(679) 评论(0)
商城前端开发规范
淘宝web前端开发规范
前端开发字体规范

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <meta name=”renderer” content=”webkit|ie-stand|ie-comp” />
        <meta name=”QQ545525897″ />
        <title>翻页</title>
        <style type=”text/css”>
            * {
                padding: 0;
                margin: 0;
                font-size: 12px;
                font-family: ‘Microsoft YaHei’, ‘微软雅黑’, ‘Arial’,
                    ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, ‘sans-serif’;
                color: #777;
            }
            a {
                color: #4e4e4e;
                text-decoration: none;
                -webkit-transition: transform 0.3s ease,
                    text-decoration 0.3s ease, color 0.3s, background 0.3s ease,
                    text-indent 0.3s ease;
                -moz-transition: transform 0.3s ease, text-decoration 0.3s ease,
                    color 0.3s, background 0.3s ease, text-indent 0.3s ease;
                transition: transform 0.3s ease, text-decoration 0.3s ease,
                    color 0.3s, background 0.3s ease, text-indent 0.3s ease;
            }
            a:hover {
                color: #414141;
                text-decoration: underline;
            }
            body {
                position: relative;
                background-color: #fff;
            }
            .clear {
                width: 100%;
                clear: both;
                height: 0;
                overflow: hidden;
            }
            .clearB:after {
                content: ‘ ‘;
                display: block;
                width: 100%;
                clear: both;
            }
            ul li {
                list-style: none;
            }
            img {
                border: none;
            }
            .page-box-max {
                text-align: center;
            }
            .page-box {
                padding: 60px 0;
                text-align: center;
                display: inline-block;
                margin: 0 auto;
            }
            .page-box span {
                display: inline-block;
                margin-left: 10px;
                font-size: 16px;
                width: 11px;
                text-align: center;
                height: 26px;
                float: left;
            }
            .page-box .white-hover {
                display: none;
            }
            .page-box a.page-left:hover .white-hover {
                display: block;
            }
            .page-box a.page-right:hover .white-hover {
                display: block;
            }
            .page-box a {
                display: inline-block;
                margin-left: 6px;
                padding: 0 10px;
                height: 26px;
                font-size: 14px;
                border: 1px solid #d6d6d6;
                border-radius: 3px;
                font-family: ‘Microsoft YaHei’, ‘微软雅黑’, ‘Arial’,
                    ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, ‘sans-serif’;
                line-height: 26px;
                background: #fff;
                text-decoration: none;
                color: #919191;
                position: relative;
                float: left;
            }
            .page-box a img {
                width: 24px;
                position: absolute;
                top: 2px;
                left: 1px;
            }
            .page-box a.page-next {
                width: 80px;
            }
            .page-box a.page-end {
                width: 59px;
            }
            .page-box a:hover {
                background: #0090ff;
                border: 1px solid #0090ff;
                color: #fff;
            }
            .page-box a.active {
                background: #df4240;
                border: 1px solid #df4240;
                color: #fff;
            }
            .page-box .page-next {
                font-family: ‘Microsoft YaHei’, ‘微软雅黑’, ‘Arial’,
                    ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, ‘sans-serif’;
            }
            #Pager_input {
                margin-left: 6px;
                padding: 0 10px;
                height: 26px;
                font-size: 14px;
                border: 1px solid #d6d6d6;
                border-radius: 3px;
                outline: none;
                float: left;
            }
            #Pager_btn {
                float: left;
                margin-left: 6px;
                padding: 0 10px;
                height: 28px;
                line-height: 28px;
                font-size: 14px;
                border: 1px solid #d6d6d6;
                border-radius: 3px;
                background: #fff;
                outline: none;
            }
        </style>
        <script src=”https://duizhenpeng.github.io/js/jquery1.8.3.js”></script>
    </head>
    <body>
        <div class=”page-box-max”><div class=”page-box”></div></div>
        <input type=”hidden” id=”max-page” value=”40″ />
        <input type=”hidden” id=”my-page” value=”1″ />
        <script type=”text/javascript”>
            if ($(‘.page-box’).html() != undefined) {
                //翻页
                var maxPage = Math.ceil($(‘#max-page’).val()), //总页数
                    ThisPage = parseInt($(‘#my-page’).val()), //当前页数
                    PageBox = $(‘.page-box’),
                    oPageVal = ‘/?p=’,
                    oUrl = ”
                if (maxPage != 0) {
                    if ($(‘body’).hasClass(‘search-page’)) {
                        //搜索页
                        oPageVal = ‘&p=’
                        oUrl = ‘?v=’ + $(‘#search-value’).val()
                    }
                    if (maxPage > 9) {
                        if (maxPage – 4 > ThisPage) {
                            if (ThisPage – 4 > 0) {
                                for (
                                    var i = ThisPage – 4;
                                    i <= ThisPage + 4;
                                    i++
                                ) {
                                    if (i == ThisPage) {
                                        PageBox.append(
                                            “<a href=’javascript:;’ class=’active’>” +
                                                i +
                                                ‘</a>’,
                                        )
                                    } else {
                                        PageBox.append(
                                            “<a href='” +
                                                oUrl +
                                                oPageVal +
                                                i +
                                                “‘>” +
                                                i +
                                                ‘</a>’,
                                        )
                                    }
                                }
                            } else {
                                for (var i = 1; i <= 9; i++) {
                                    if (i == ThisPage) {
                                        PageBox.append(
                                            “<a href=’javascript:;’ class=’active’>” +
                                                i +
                                                ‘</a>’,
                                        )
                                    } else {
                                        PageBox.append(
                                            “<a href='” +
                                                oUrl +
                                                oPageVal +
                                                i +
                                                “‘>” +
                                                i +
                                                ‘</a>’,
                                        )
                                    }
                                }
                            }
                        } else {
                            for (var i = maxPage – 8; i <= maxPage; i++) {
                                if (i == ThisPage) {
                                    PageBox.append(
                                        “<a href=’javascript:;’ class=’active’>” +
                                            i +
                                            ‘</a>’,
                                    )
                                } else {
                                    PageBox.append(
                                        “<a href='” +
                                            oUrl +
                                            oPageVal +
                                            i +
                                            “‘>” +
                                            i +
                                            ‘</a>’,
                                    )
                                }
                            }
                        }
                    } else {
                        for (var i = 1; i <= maxPage; i++) {
                            if (i == ThisPage) {
                                PageBox.append(
                                    “<a href=’javascript:;’ class=’active’>” +
                                        i +
                                        ‘</a>’,
                                )
                            } else {
                                PageBox.append(
                                    “<a href='” +
                                        oUrl +
                                        oPageVal +
                                        i +
                                        “‘>” +
                                        i +
                                        ‘</a>’,
                                )
                            }
                        }
                    }
                    if (ThisPage – 1 < 1) {
                        $(‘.page-box a’)
                            .eq(0)
                            .before(
                                “<a href='” +
                                    oUrl +
                                    oPageVal +
                                    ThisPage +
                                    “‘>上一页</a>”,
                            )
                    } else {
                        $(‘.page-box a’)
                            .eq(0)
                            .before(
                                “<a href='” +
                                    oUrl +
                                    oPageVal +
                                    (ThisPage – 1) +
                                    “‘>上一页</a>”,
                            )
                    }
                    $(‘.page-box a’)
                        .eq(0)
                        .before(“<a href='” + oUrl + oPageVal + “1′>首页</a>”)
                    if (ThisPage + 1 > maxPage) {
                        PageBox.append(
                            “<a href='” +
                                oUrl +
                                oPageVal +
                                maxPage +
                                “‘>下一页</a>”,
                        )
                    } else {
                        PageBox.append(
                            “<a href='” +
                                oUrl +
                                oPageVal +
                                (ThisPage + 1) +
                                “‘>下一页</a>”,
                        )
                    }
                    PageBox.append(
                        “<a href='” +
                            oUrl +
                            oPageVal +
                            maxPage +
                            “‘ class=’page-end’>尾页</a>” +
                            “<input type=’text’ value=’1′ name=’Pager_input’ id=’Pager_input’ style=’width:30px;’>” +
                            “<input type=’submit’ value=’GO’ id=’Pager_btn’>” +
                            “<div class=’clear’></div>”,
                    )
                    $(‘body’).on(‘keydown’, ‘#Pager_input’, function(ev) {
                        if (
                            ev.which == 48 ||
                            ev.which == 49 ||
                            ev.which == 50 ||
                            ev.which == 51 ||
                            ev.which == 52 ||
                            ev.which == 53 ||
                            ev.which == 54 ||
                            ev.which == 55 ||
                            ev.which == 56 ||
                            ev.which == 57 ||
                            ev.which == 46 ||
                            ev.which == 48 ||
                            ev.which == 96 ||
                            ev.which == 97 ||
                            ev.which == 98 ||
                            ev.which == 99 ||
                            ev.which == 100 ||
                            ev.which == 101 ||
                            ev.which == 102 ||
                            ev.which == 103 ||
                            ev.which == 104 ||
                            ev.which == 105 ||
                            ev.which == 37 ||
                            ev.which == 38 ||
                            ev.which == 39 ||
                            ev.which == 40 ||
                            ev.which == 8 ||
                            ev.which == 9
                        ) {
                        } else if (ev.which == 13) {
                            if ($(‘#Pager_input’).val() != ”) {
                                if ($(‘#Pager_input’).val() > maxPage) {
                                    window.location.href =
                                        oUrl + oPageVal + maxPage
                                } else {
                                    window.location.href =
                                        oUrl +
                                        oPageVal +
                                        $(‘#Pager_input’).val()
                                }
                            }
                        } else {
                            return false
                        }
                    })
                    $(‘body’).on(‘click’, ‘#Pager_btn’, function() {
                        if ($(‘#Pager_input’).val() != ”) {
                            if ($(‘#Pager_input’).val() > maxPage) {
                                window.location.href = oUrl + oPageVal + maxPage
                            } else {
                                window.location.href =
                                    oUrl + oPageVal + $(‘#Pager_input’).val()
                            }
                        }
                    })
                } else {
                    PageBox.hide()
                }
            }
        </script>
    </body>
</html>
阿里巴巴前端开发规范
阿里云前端开发规范
前端开发的规范 博客园
赞(0)
前端开发者 » 前端开发页脚翻页代码
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论