asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

 更新时间:2012年03月14日 11:14:10   作者:  
腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据
自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据
下面开讲:
  首先说一下思路,我用的是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();
}
}
});
//鼠标移动效果
$("#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文件用来处理程序并返回相应的数据,根据此数据我们肯定判断加载情况,滚动追加完成后我还多加了一个"点击加载更多的功能...",此功能实现也与上面差不多...代码都在上面,供大家参考。
  注意:为了防止滚动事件一直会被执行,所以才定义了一个loaded来控制滚动事件的执行。

相关文章

  • jquery插件jbox使用iframe关闭问题

    jquery插件jbox使用iframe关闭问题

    最近做需要用到弹出窗口,发现JBox不错,可以支持iframe,但是发现个问题,在iframe中添加一个按钮点击此按钮
    2009-02-02
  • EasyUI Pagination 分页的两种做法小结

    EasyUI Pagination 分页的两种做法小结

    这篇文章主要介绍了EasyUI Pagination 分页的两种做法小结的相关资料,需要的朋友可以参考下
    2016-07-07
  • Jquery倒计时源码分享

    Jquery倒计时源码分享

    这是一个基于jquey写的倒计时。当然代码有点小改动,只是改了一下展示效果。
    2014-05-05
  • jQuery中Dom的基本操作小结

    jQuery中Dom的基本操作小结

    本篇文章主要是对jQuery中Dom的基本操作进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • jQuery实现点击查看大图并以弹框的形式居中

    jQuery实现点击查看大图并以弹框的形式居中

    这篇文章主要介绍了jQuery实现点击查看大图并以弹框的形式居中的代码,代码简单易懂,需要的朋友参考下
    2016-08-08
  • jQuery.form插件的使用及跨域异步上传文件

    jQuery.form插件的使用及跨域异步上传文件

    这个跨域异步上传功能我们借助了Jquery.form插件。接下来通过本文给大家介绍jQuery跨域异步上传文件的相关知识,感兴趣的朋友一起学习吧
    2016-04-04
  • jQuery UI Dialog 创建友好的弹出对话框实现代码

    jQuery UI Dialog 创建友好的弹出对话框实现代码

    jQuery UI Dialog是jQuery UI的弹出对话框组件,使用它可以创建各种美观的弹出对话框;它可以设置对话框的标题、内容,并且使对话框可以拖动、调整大小、及关闭;平常主要用来替代浏览嚣自带的alert、confirm、open等方法
    2012-04-04
  • 基于jQuery实现的幻灯图片切换

    基于jQuery实现的幻灯图片切换

    本篇文章分享了基于jQuery实现的幻灯图片切换效果的部分代码。感兴趣的朋友可以下载实例运行,下面就跟小编一起来看看吧
    2016-12-12
  • 使用jquery如何获取时间

    使用jquery如何获取时间

    日期函数在程序开发中是一个重要的工具,js也提供了Date()函数,如获取当前时间,当前年月,已经系统时间的毫秒数。
    2016-10-10
  • Jquery实现图片预加载与延时加载的方法

    Jquery实现图片预加载与延时加载的方法

    这篇文章主要介绍了Jquery实现图片预加载与延时加载的方法,分别介绍了原生javascript与jQuery插件实现图片的预加载及延迟加载的方法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12

最新评论