自从腾讯微博上线以来，基本上就开始用了，一直到现在，作为一个开发人员，也看到了腾讯微博一直在不停的改变，也不知道大家有没有发现，腾讯微博提供两种加载数据的方式，一种是分页，一种是滚动浏览器滚动条加载数据，分页功能我想大家都做得太多了，今天我与大家分享一下我用滚动条滚动加载数据
下面开讲：
首先说一下思路，我用的是jquery，然后通过jquery的ajax()方法通过 http 请求加载远程数据来实现的，用到jquery，首先要应用jquery.min.js类库，如果本地没有，也可以直接引用下面地址。
好吧，下面我们看下核心代码：
复制代码 代码如下:
// - -!,你懂的.
var count=;
var times=0;
var loaded = true;
function add_data()
{
var top = $(#main_left_add).offset().top;
if(loaded && ($(window).scrolltop() + $(window).height() > top))
{
$(#main_left_add).html(数据加载中...);
times++;
$.ajax(
{
type: post,
datatype: text,
url: weibo.ashx,
data: userid=++&touserid=++&count=+count+×=+times+&type=1,
success: function(data)
{
//alert(第+times+次追加数据.);
if(data == 没有数据)
{
$(#main_left_add).css(display,none);
loaded=false;
addeffect();
}
else if(data == )
{
$(#main_left_add).html(点击加载更多...);
$(#main_left_add).css(display,block);
loaded=false;
addeffect();
}
else if(data != )
{
$(#main_left_down).append(data);
addeffect();
}
}
}
);
}
}
$(window).scroll(add_data);
//点击追加数据
$(#main_left_add).click(function(){
$.ajax({
type: post,
datatype: text,
url: weibo.ashx,
data:userid=++&touserid=++&count=+count+×=+times+&type=2,
success: function(data){
if(data==没有数据)
{
$(#main_left_add).css(display,none);
addeffect();
}
else
{
$(#main_left_down).append(data);
$(#main_left_add).html(点击加载更多...);
addeffect();
}
}
});
//鼠标移动效果
$(#main_left_add).mouseover(function(){
$(this).css(background-color,#e4eef8);
});
$(#main_left_add).mouseout(function(){
$(this).css(background-color,#f0f5f8);
});
这是前台js代码，下面我稍微的解释一下代码：count是定义的数据总数，定义两个div，一的div用来追加数据，一个div用来判断滚动条的位置，再建一个*.ashx文件用来处理程序并返回相应的数据，根据此数据我们肯定判断加载情况，滚动追加完成后我还多加了一个点击加载更多的功能...，此功能实现也与上面差不多...代码都在上面，供大家参考。
注意：为了防止滚动事件一直会被执行，所以才定义了一个loaded来控制滚动事件的执行。