asp.net Web site development using jquery to implement scrolling browser scroll bar loading data (similar to Tencent Weibo) _jquery

Since Tencent Weibo online, basically started to use, until now, as a developer, also saw Tencent Weibo has been constantly changing, do not know whether you have found, Tencent Weibo provides two ways to load data, one is paging, one is scrolling browser scroll bar loading data, Paging feature I think we've all done too much, and today I'm going to share with you that I scroll through the data with the scroll bar
Here's the lecture:
First of all, I used jquery, and then through the jquery Ajax () method to load remote data through the HTTP request to implement, using jquery, first to apply the Jquery.min.js class library, if not locally, you can also directly refer to the following address < Script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" ></ Script>.
OK, let's take a look at the core code here:

Copy Code code as follows:

--!, you know that.
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 ("Data Loading ...");
times++;
$.ajax (
{
Type: "POST",
DataType: "Text",
URL: "Weibo.ashx",
Data: "Userid=" +&LT;%=HF. Value%>+ "&touserid=" +<%=hf1. Value%>+ "&count=" +count+ "x=" +times+ "&type=1",
Success:function (data)
{
Alert ("+times+" "second append data.");
if (data = = "not")
{
$ ("#main_left_add"). CSS ("display", "none");
Loaded=false;
AddEffect ();
}
else if (data = = "")
{
$ ("#main_left_add"). HTML ("Click to load More ...");
$ ("#main_left_add"). CSS ("Display", "block");
Loaded=false;
AddEffect ();
}
else if (data!= "")
{
$ ("#main_left_down"). Append (data);
AddEffect ();
}
}
}
);
}
}
$ (window). Scroll (Add_data);
Click Append Data
$ ("#main_left_add"). Click (function () {
$.ajax ({
Type: "POST",
DataType: "Text",
URL: "Weibo.ashx",
Data: "Userid=" +&LT;%=HF. Value%>+ "&touserid=" +<%=hf1. Value%>+ "&count=" +count+ "x=" +times+ "&type=2",
Success:function (data) {
if (data== "no Data")
{
$ ("#main_left_add"). CSS ("display", "none");
AddEffect ();
}
Else
{
$ ("#main_left_down"). Append (data);
$ ("#main_left_add"). HTML ("Click to load More ...");
AddEffect ();
}
}
});
Mouse Move Effect
$ ("#main_left_add"). MouseOver (function () {
$ (this). CSS ("Background-color", "#e4eef8");
});
$ ("#main_left_add"). Mouseout (function () {
$ (this). CSS ("Background-color", "#f0f5f8");
});

This is the foreground JS code, the following I explain a little bit of code: count is the total number of data defined, define two div, one of the div used to append data, a div to determine the position of the scroll bar, and then build a *.ashx file to process the program and return the corresponding data, Based on this data we definitely judge the loading situation, after the scrolling append completes I also added a "Click to load more features ...", this function is similar to the above ... The code is above for your reference.
Note: To prevent scrolling events from being executed all the time, a loaded is defined to control the execution of the scrolling event.