asp.net網站開發中用jquery實現滾動瀏覽器滾動條加載數據(類似于
2024-05-06 14:22:19
供稿：網友
自從騰訊微博上線以來，基本上就開始用了，一直到現在，作為一個開發人員，也看到了騰訊微博一直在不停的改變，也不知道大家有沒有發現，騰訊微博提供兩種加載數據的方式，一種是分頁，一種是滾動瀏覽器滾動條加載數據，分頁功能我想大家都做得太多了，今天我與大家分享一下我用滾動條滾動加載數據
下面開講：
首先說一下思路，我用的是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+"&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+"&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文件用來處理程序并返回相應的數據，根據此數據我們肯定判斷加載情況，滾動追加完成后我還多加了一個"點擊加載更多的功能..."，此功能實現也與上面差不多...代碼都在上面，供大家參考。
