站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: asp.net网站开发中用jquery实现滚动浏览器滚动条加
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

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();
}
}
});
//鼠标移动效果

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -