有时候我们希望将微博那种滚动鼠标加载内容的方式展示数据,其实我个人认为这种方式和原始的分页方式很类似,但滚动加载通过ajax后台获取数据,也没有想的那么复杂,今天以scrollpagination为例简单介绍一个鼠标滚动加载内容,scrollpagination代码比较简单,主代码不到100行,也是通过ajax的方式获取数据之后追加到ul中。
客户端:
<script type="text/javascript">
<?php
$count_all=100 //数据总数
$perpage=10 //每页条数
if($count_all%$perpage==0)
$pages=intval($count_all/$perpage);
else
$pages=intval($count_all/$perpage)+1;
?>
$(function(){
var now_page=0; //当前分页
$('#content').scrollPagination({
'contentPage': 'content.php', // 获取服务器端数据的页面
'contentData': {now_page:now_page,count_all:'<?php echo $count_all?>',perpage:'<?php echo $perpage?>'} // 传递的参数
'scrollTarget': $(window), // 滚动的模块,默认是window,也可以设置指定的模块内滚动的时候才能触发该事件
'heightOffset': 0, // 当距离底部还有多少像素的时候触发事件
'beforeLoad': function(){ // 事件触发前的函数
$('#loading').fadeIn();
},
'afterLoad': function(elementsLoaded){ // 事件触发后的事件
now_page++;
$('#loading').fadeOut();
$(elementsLoaded).fadeInWithDelay();
if(now_page > <?php echo $pages?>)
{
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
}
});
// 内容加载效果,主要控制延迟时间
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
</script>
服务器端程序:
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>测试001</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>测试002</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>测试003</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>测试004</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>测试005</p></li>
具体下载地址:
http://pan.baidu.com/s/1ntkcJWl