脚本宝典收集整理的这篇文章主要介绍了js實例教程-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+"&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是定義的數據總數，定義兩個p，一的p用來追加數據，一個p用來判斷滾動條的位置，再建一個*.ashx文件用來處理程序並返回相應的數據，根據此數據我們肯定判斷加載情況，滾動追加完成後我還多加了一個"點擊加載更多的功能..."，此功能實現也與上面差不多...代碼都在上面，供大家參考。
　　注意：為了防止滾動事件一直會被執行，所以才定義了一個loaded來控制滾動事件的執行。

覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-asp.net網站開發中用jquery實現滾動瀏覽器滾動條加載數據(類似於騰訊微博)全部内容，希望文章能够帮你解决js實例教程-asp.net網站開發中用jquery實現滾動瀏覽器滾動條加載數據(類似於騰訊微博)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。