Jquery 无限往下滚动

这是仿照腾讯的微薄上的一个效果。滚动条可以无限的网下滚动并且无刷不断从数据库中获取新的数据。

?

  <style type="text/css">

   body{ font-family: "Trebuchet MS",verdana,arial;}

   #loading{ display:none; font-weight:bold;color:#FF0000;}

   p { padding:10px;}

  </style>

 

<p id="loading">loading data... </p>

 

$(function(){

     var isOK=true;//记录上次访问是否已经结束，如果ajax也有线程就好了

     var scrollH=0;//判断是往上滚还是往下滚

     var  intI=1;

   

    // loading层是固定在页脚的记录牌

   

     $(".loading").css({"right":"2","bottom":0});

     $(".loading")

     .ajaxStart(function(){

        isOK=false;//执行ajax的时候把isOK设置成false防止第一次没有执行完的情况下执行第二次易出错

        $("#loading2").show();

          })

     .ajaxStop(function(){

         isOK=true;

          $("#loading2").hide();

         })

       

    $(window).scroll(function(){

     //控制load层     

      document.getElementByIdx_x_x("loading").style.top=document.documentElement.scrollTop+"px";

        //触法ajax条件  可以换算成百分比更好

   if($(document).height()-$(window).scrollTop()-document.documentElement.clientHeight<240）{

      //当前位置比上次的小就是往上滚动不要执行ajax代码块

      if(scrollH>document.documentElement.scrollTopY)

      {

        $(".loading").append("<br/>向上滚不执行")

        scrollH=document.documentElement.scrollTop;//记录新位置

       return;

       }

      if(isOK)//如果是第一次或者上次执行完成了就执行本次

      {

   

         scrollH=document.documentElement.scrollTop;//记录新位置

         $(".loading").append("<br/>~~<span style='background:#red'>执行了ajax。。。。。</span><br/>")

         isOK=false;

      $.ajax({

          type:"POST",

          dataType: 'xml',

          url:"http://localhost:49302/MY100/2010/WebService1.asmx/getDS",

          error:function(e){

            $(".main").append('发生了错误：'+e)

           },

          success:function(data){

           try{

            $(data).find("Table").each(function(i){

                  $(".main").append("结果："+$(this).children('txtTitle').text()+"<br/>"); 

                  $(".main").append("结果："+$(this).children('txtBody1').text()+"<br/>"); 

                  $(".main").append("结果："+$(this).children('txtBody2').text()+"<br/>"); 

                  $(".main").append("结果："+$(this).children('txtBody3').text()+"<br/>");

                  $(".main").append("结果："+$(this).children('txtBody4').text()+"<br/>");

                  $(".main").append("结果："+$(this).children('ID').text()+"<br/>");

                  })//each

            }

           catch(e){

             $(".main").append("<p>"+e+"</p>")

            }

           }//success

          })//ajax

         }//if(isOK)

         else

         {

           $(".loading").append("<br/>~~你是向下滚了，但是上次还没有执行完毕，等等吧<br/>")

          }

      }// 触法ajax条件  

     })//scroll

    })//Jquery 结束处