jquery 实现鼠标滚动加载内容 类似微博

        有时候我们希望将微博那种滚动鼠标加载内容的方式展示数据，其实我个人认为这种方式和原始的分页方式很类似，但滚动加载通过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