欢迎光临
我们一直在努力

Query 实现 Discuz! 伪翻页(不刷新页面)

建站超值云服务器,限时71元/月

首先要说的是,这是一个伪翻页。原理是调用例如100个数据后,将其后面的内容做隐藏处理,在不刷新页面的情况下进行内容的翻页。并且附带了渐入渐出效果。

引入jQuery

<script src=”template/yulun_hei/js/jquery.min.js” type=”text/javascript”></script>

<script src=”template/yulun_hei/js/jPages.js” type=”text/javascript”></script>

<script type=”text/javascript”>var jQuery = jQuery.noConflict();</script>

示例源码

<ul id=”itemContainer”>

    <li>…</li>

    <li>…</li>

    <li>…</li>

    <li>…</li>

    <li>…</li>

</ul>

翻页源码

<div class=”holder”></div>

启动插件

jQuery(function() {

        jQuery(“div.holder”).jPages({

                containerID  : “itemContainer”,//父级定义的ID名

                perPage:20,  //该数字控制每页显示数量,想要显示几个就修改成数字几

                previous: “上一页”,

                next: “下一页”        

        });

        jQuery(“div.holder”).click(function(){

                jQuery(‘body,html’).animate({scrollTop:370},500);

                return false;

        });

});

    这里需要注意的是:perPage:20,是每页显示的个数,也就是说<li>标签的总数,必须大于这里的20。

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » Query 实现 Discuz! 伪翻页(不刷新页面)
分享到: 更多 (0)