jQuery 实现 Discuz! 伪翻页（不刷新页面）

admin · 发表于 2020-8-19 16:17:58

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

首先要说的是，这是一个伪翻页。原理是调用例如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。

©dz插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
如有侵权请邮件与我们联系处理:discuz-x@qq.com（手机随时接收邮件）并出示相关证明以便删除。敬请谅解！

jQuery 实现 Discuz! 伪翻页（不刷新页面）

马上注册，免费下载更多dz插件网资源。

相关帖子

回复

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com