快捷導(dǎo)航

asp.net網(wǎng)站開發(fā)中用jquery實(shí)現(xiàn)滾動(dòng)瀏覽器滾動(dòng)條加載數(shù)據(jù)(類似于騰訊微博)

更新時(shí)間：2012年03月14日 11:14:10 作者：

騰訊微博提供兩種加載數(shù)據(jù)的方式，一種是分頁(yè)，一種是滾動(dòng)瀏覽器滾動(dòng)條加載數(shù)據(jù)，分頁(yè)功能我想大家都做得太多了，今天我與大家分享一下我用滾動(dòng)條滾動(dòng)加載數(shù)據(jù)

自從騰訊微博上線以來(lái)，基本上就開始用了，一直到現(xiàn)在，作為一個(gè)開發(fā)人員，也看到了騰訊微博一直在不停的改變，也不知道大家有沒(méi)有發(fā)現(xiàn)，騰訊微博提供兩種加載數(shù)據(jù)的方式，一種是分頁(yè)，一種是滾動(dòng)瀏覽器滾動(dòng)條加載數(shù)據(jù)，分頁(yè)功能我想大家都做得太多了，今天我與大家分享一下我用滾動(dòng)條滾動(dòng)加載數(shù)據(jù)
下面開講：
　　首先說(shuō)一下思路，我用的是Jquery，然后通過(guò)Jquery的ajax()方法通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)來(lái)實(shí)現(xiàn)的，用到Jquery，首先要應(yīng)用jquery.min.js類庫(kù)，如果本地沒(méi)有，也可以直接引用下面地址<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>。
　　好吧，下面我們看下核心代碼：

復(fù)制代碼代碼如下:

 
// - -!,你懂的. 
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("數(shù)據(jù)加載中..."); 
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+"次追加數(shù)據(jù)."); 
if(data == "沒(méi)有數(shù)據(jù)") 
{ 
$("#main_left_add").css("display","none"); 
loaded=false; 
AddEffect(); 
} 
else if(data == "") 
{ 
$("#main_left_add").html("點(diǎn)擊加載更多..."); 
$("#main_left_add").css("display","block"); 
loaded=false; 
AddEffect(); 
} 
else if(data != "") 
{ 
$("#main_left_down").append(data); 
AddEffect(); 
} 
} 
} 
); 
} 
} 
$(window).scroll(Add_Data); 
//點(diǎn)擊追加數(shù)據(jù) 
$("#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=="沒(méi)有數(shù)據(jù)") 
{ 
$("#main_left_add").css("display","none"); 
AddEffect(); 
} 
else 
{ 
$("#main_left_down").append(data); 
$("#main_left_add").html("點(diǎn)擊加載更多..."); 
AddEffect(); 
} 
} 
}); 
//鼠標(biāo)移動(dòng)效果 
$("#main_left_add").mouseover(function(){ 
$(this).css("background-color","#e4eef8"); 
}); 
$("#main_left_add").mouseout(function(){ 
$(this).css("background-color","#f0f5f8"); 
}); 

這是前臺(tái)js代碼，下面我稍微的解釋一下代碼：count是定義的數(shù)據(jù)總數(shù)，定義兩個(gè)div，一的div用來(lái)追加數(shù)據(jù)，一個(gè)div用來(lái)判斷滾動(dòng)條的位置，再建一個(gè)*.ashx文件用來(lái)處理程序并返回相應(yīng)的數(shù)據(jù)，根據(jù)此數(shù)據(jù)我們肯定判斷加載情況，滾動(dòng)追加完成后我還多加了一個(gè)"點(diǎn)擊加載更多的功能..."，此功能實(shí)現(xiàn)也與上面差不多...代碼都在上面，供大家參考。
　　注意：為了防止?jié)L動(dòng)事件一直會(huì)被執(zhí)行，所以才定義了一個(gè)loaded來(lái)控制滾動(dòng)事件的執(zhí)行。

您可能感興趣的文章: