如何通过jQuery实现无限往下滚动效果代码?

如何通过jQuery实现无限往下滚动效果代码?

本文实例讲述了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 结束处

希望本文所述对大家jQuery程序设计有所帮助。