文章列表无限分页效果jquery插件
插件下载: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; }
<< 上一篇
下一篇 >>