明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

Jquery 无限往下滚动

Posted on 2012-07-31 10:02  且行且思  阅读(3819)  评论(0编辑  收藏  举报

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

  <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 结束处