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

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

2024-09-18 08:43:24   216人阅读

自从腾讯微博上线以来，基本上就开始用了，一直到现在，作为一个开发人员，也看到了腾讯微博一直在不停的改变，也不知道大家有没有发现，腾讯微博提供两种加载数据的方式，一种是分页，一种是滚动浏览器滚动条加载数据，分页功能我想大家都做得太多了，今天我与大家分享一下我用滚动条滚动加载数据，小生不才，还望各位大侠指教，呵呵~

　　下面开讲：

　　首先说一下思路，我用的是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 =http://www.mamicode.com/="没有数据")
                        {
                            $("#main_left_add").css("display","none");
                            loaded=false;
                            AddEffect();
                        }
                        else if(data =http://www.mamicode.com/="")
                        {
                            $("#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(datahttp://www.mamicode.com/=="没有数据")
                        {
                            $("#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来控制滚动事件的执行。

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


联系
我们