无聊的分页【灵活配置】

最新推荐文章于 2025-08-13 21:05:35 发布

原创最新推荐文章于 2025-08-13 21:05:35 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #server #html #div

jQuery应用专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现的分页显示方法，该方法可以根据设定的每页显示数量动态创建页面导航链接，并展示指定范围内的列表项。通过简单的鼠标悬停效果增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var pagesize = 4;
        $(function () {
            $("#ulqufu li").hide();
            var s;
            var licount = $("#ulqufu li").length / pagesize;
            var pagecount = parseInt(Math.ceil(licount));
            for (var i = 1; i <= pagecount; i++) {
                if (i * pagesize > $("#ulqufu li").length) {
                    if (((i - 1) * pagesize + 1) == $("#ulqufu li").length) {
                        $("#spanpageinfo").append("<a onmouseout=\"hide()\" onmousemove=\"show2(" + $("#ulqufu li").length + ")\" href=\"javascript:void()\" >" + $("#ulqufu li").length + "区</a>");
                    } else {
                        $("#spanpageinfo").append("<a onmouseout=\"hide()\" onmousemove=\"show(" + ((i - 1) * pagesize + 1) + "," + $("#ulqufu li").length + ")\" href=\"javascript:void()\" >" + ((i - 1) * pagesize + 1) + "-" + $("#ulqufu li").length + "区 </a>");
                    }
                }
                else {
                    $("#spanpageinfo").append("<a onmouseout=\"hide()\" onmousemove=\"show(" + ((i - 1) * pagesize + 1) + "," + (i * pagesize) + ")\" href=\"javascript:void()\" >" + ((i - 1) * pagesize + 1) + "-" + (i * pagesize) + "区 |</a>");

                }
            }

        });
        function hide() { $("#ulqufu li").hide(); }
        function show2(end) { $("#ulqufu li:eq(0)").show(); }
        function show(start, end) {

            if ((9 - end) == 0) {
                $("#ulqufu li:lt(" + (end - start + 1) + ")").show();
            } else {
                $("#ulqufu li:gt(" + (9 - end - 1) + "):lt(" + (end - start + 1) + ")").show();
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <span id="spanpageinfo"></span>
        <ul id="ulqufu">
            <li>9</li>
            <li>8</li>
            <li>7</li>
            <li>6</li>
            <li>5</li>
            <li>4</li>
            <li>3</li>
            <li>2</li>
            <li>1</li>
        </ul>
    </div>
    </form>
</body>
</html>