用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博) [复制链接]

首先要应用jquery.min.js类库，如果本地没有，也可以直接引用下面地址<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>。

1. // - -!,你懂的.
   
2.             var count=<%=allcount %>;
   
3.             var times=0;
   
4.             var loaded = true;
   
5.             function Add_Data()
   
6.             {
   
7.               var top = $("#main_left_add").offset().top;
   
8.               if(loaded && ($(window).scrollTop() + $(window).height() > top))
   
9.               {
   
10.                  $("#main_left_add").html("数据加载中...");
    
11.                  times++;
    
12.                  $.ajax(
    
13.                  {
    
14.                      type: "POST",
    
15.                      dataType: "text",
    
16.                      url: "weibo.ashx",
    
17.                      data: "userid="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"&times="+times+"&type=1",
    
18.                      success: function(data)
    
19.                      {
    
20.                         //alert("第"+times+"次追加数据.");
    
21.                         if(data == "没有数据")
    
22.                         {
    
23.                             $("#main_left_add").css("display","none");
    
24.                             loaded=false;
    
25.                             AddEffect();
    
26.                         }
    
27.                         else if(data == "")
    
28.                         {
    
29.                             $("#main_left_add").html("点击加载更多...");
    
30.                             $("#main_left_add").css("display","block");
    
31.                             loaded=false;
    
32.                             AddEffect();
    
33.                         }
    
34.                         else if(data != "")
    
35.                         {
    
36.                             $("#main_left_down").append(data);                            
    
37.                             AddEffect();
    
38.                         }
    
39.                      }
    
40.                   }
    
41.                 );
    
42.               }
    
43.             }
    
44.             $(window).scroll(Add_Data);            
    
45.             //点击追加数据
    
46.             $("#main_left_add").click(function(){
    
47.                 $.ajax({
    
48.                     type: "POST",
    
49.                     dataType: "text",
    
50.                     url: "weibo.ashx",
    
51.                     data:"userid="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"&times="+times+"&type=2",
    
52.                     success: function(data){
    
53.                         if(data=="没有数据")
    
54.                         {
    
55.                             $("#main_left_add").css("display","none");
    
56.                             AddEffect();
    
57.                         }
    
58.                         else
    
59.                         {
    
60.                             $("#main_left_down").append(data);
    
61.                             $("#main_left_add").html("点击加载更多...");
    
62.                             AddEffect();                            
    
63.                         }
    
64.                     }
    
65.             });
    
66.             //鼠标移动效果
    
67.             $("#main_left_add").mouseover(function(){
    
68.                 $(this).css("background-color","#e4eef8");
    
69.             });
    
70.             $("#main_left_add").mouseout(function(){
    
71.                 $(this).css("background-color","#f0f5f8");
    
72.             });

复制代码

这是前台js代码，下面我稍微的解释一下代码：count是定义的数据总数，定义两个div，一的div用来追加数据，一个div用来判断滚动条的位置，再建一个*.ashx文件用来处理程序并返回相应的数据，根据此数据我们肯定判断加载情况，滚动追加完成后我还多加了一个"点击加载更多的功能..."，此功能实现也与上面差不多...代码都在上面，供大家参考。

　　注意：为了防止滚动事件一直会被执行，所以才定义了一个loaded来控制滚动事件的执行。

基于此可以实现很多功能效果，大家可以分享下