文章列表无限分页效果jquery插件

admin

发表文章数:3203

插件下载:http://pan.baidu.com/s/1o6t0v7W

引入jquery.js和插件后,JS代码:

$(document).ready(function(){
$('#icontent').infinitescroll({
//#indexpost 是包括所有文章的div元素id
navSelector  : "#navigation",
// 页面分页元素(成功后隐藏)
nextSelector : "#navigation a",
// 需要点击的下一页链接
itemSelector : "#icontent div.post"   ,
// 返回后文章对应的插入位置
loadingImg   : "图片地址",
//加载图片路径(绝对路径)
loadingText  : "加载中..." ,
//显示的提示文字
animate      : true,
//加载完毕是否采用动态效果
extraScrollPx: 150,
//向下滚动的像素,必须开启动态效果
donetext     : "后面没有了" ,
//返回404,即到头了显示的文字
},function(arrayOfNewElems){
});

// 取消scroll绑定
$(window).unbind('.infscr');
// 手动点击的元素
$('#navigation a').click(function(){
$(document).trigger('retrieve.infscr');
return false;
});

// 如果没有下一页,去掉分页
$(document).ajaxError(function(e,xhr,opt){
if (xhr.status == 404) $('#navigation').remove();
});

});

Html代码结构

<div id="content">
	<div id="icontent">
	</div><!--icontent-->
	<div id="navigation">
		<a href="#">1</a>
		<a href="#">2</a>
	</div>
</div><!--content-->

CSS代码:

#navigation{
	display:block!important; 
	border-radius:10px; 
	-moz-border-radius:10px; 
	-webkit-border-radius:10px; 
	border: 1px solid #ddd; 
	background: #EFEFEF;
	box-shadow: 2px 2px 2px rgba(50,50,50,0.4); 
	color: #444; 
	text-decoration: none;
	width:60%;
	margin:0 0 0 90px; 
	padding: 10px;
	text-align: center;
}

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 夜河资源网
原文地址:《文章列表无限分页效果jquery插件》 发布于2019-04-19

分享到:
赞(0) 打赏

评论 抢沙发

1 + 7 =


撰写不易~如果您觉得文章对您有帮助的话可以打赏我哦~谢谢亲亲~

支付宝扫一扫打赏

微信扫一扫打赏

外服网游加速器破解版
包含腾讯网游加速器、海豚网游加速器等八款知名加速器,可加速外服游戏,永久包售后包更新,不定时添加新款破解版加速器!
切换注册

登录

忘记密码 ?

切换登录

注册