asp.net網站開發中用jquery實現滾動瀏覽器滾動條加載數據(類似於騰訊微博)

　　自從騰訊微博上線以來，基本上就開始用了，一直到現在，作為一個開發人員，也看到了騰訊微博一直在不停的改變，也不知道大家有沒有發現，騰訊微博提供兩種加載數據的方式，一種是分頁，一種是滾動瀏覽器滾動條加載數據，分頁功能我想大家都做得太多了，今天我與大家分享一下我用滾動條滾動加載數據，小生不才，還望各位大俠指教，呵呵~

　　下面開講：

　　首先說一下思路，我用的是Jquery，然后通過Jquery的ajax()方法通過 HTTP 請求加載遠程數據來實現的，用到Jquery，首先要應用jquery.min.js類庫，如果本地沒有，也可以直接引用下面地址<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>。

　　好吧，下面我們看下核心代碼：

// - -!,你懂的.
            var count=<%=allcount %>;
            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="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"&times="+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="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"&times="+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來控制滾動事件的執行。

　　PS：Tandy Tang祝大家寫代碼寫的愉快！