欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實現(xiàn)無限往下滾動效果代碼

 更新時間:2016年04月16日 11:36:15   作者:且行且思  
這篇文章主要介紹了jQuery實現(xiàn)無限往下滾動效果代碼,涉及jQuery基于ajax交互操作數(shù)據(jù)庫數(shù)據(jù)及頁面元素動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)無限往下滾動效果的方法。分享給大家供大家參考,具體如下:

這是仿照騰訊的微薄上的一個效果。滾動條可以無限的網(wǎng)下滾動并且無刷不斷從數(shù)據(jù)庫中獲取新的數(shù)據(jù)。

<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;//記錄上次訪問是否已經(jīng)結(jié)束,如果ajax也有線程就好了
   var scrollH=0;//判斷是往上滾還是往下滾
   var intI=1;
  // loading層是固定在頁腳的記錄牌
   $(".loading").css({"right":"2","bottom":0});
   $(".loading")
   .ajaxStart(function(){
    isOK=false;//執(zhí)行ajax的時候把isOK設(shè)置成false防止第一次沒有執(zhí)行完的情況下執(zhí)行第二次易出錯
    $("#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){
   //當前位置比上次的小就是往上滾動不要執(zhí)行ajax代碼塊
   if(scrollH>document.documentElement.scrollTopY)
   {
    $(".loading").append("<br/>向上滾不執(zhí)行")
    scrollH=document.documentElement.scrollTop;//記錄新位置
    return;
    }
   if(isOK)//如果是第一次或者上次執(zhí)行完成了就執(zhí)行本次
   {
     scrollH=document.documentElement.scrollTop;//記錄新位置
     $(".loading").append("<br/>~~<span style='background:#red'>執(zhí)行了ajax。。。。。</span><br/>")
     isOK=false;
   $.ajax({
     type:"POST",
     dataType: 'xml',
     url:"http://localhost:49302/MY100/2010/WebService1.asmx/getDS",
     error:function(e){
      $(".main").append('發(fā)生了錯誤:'+e)
      },
     success:function(data){
      try{
      $(data).find("Table").each(function(i){
         $(".main").append("結(jié)果:"+$(this).children('txtTitle').text()+"<br/>");
         $(".main").append("結(jié)果:"+$(this).children('txtBody1').text()+"<br/>");
         $(".main").append("結(jié)果:"+$(this).children('txtBody2').text()+"<br/>");
         $(".main").append("結(jié)果:"+$(this).children('txtBody3').text()+"<br/>");
         $(".main").append("結(jié)果:"+$(this).children('txtBody4').text()+"<br/>");
         $(".main").append("結(jié)果:"+$(this).children('ID').text()+"<br/>");
         })//each
      }
      catch(e){
       $(".main").append("<p>"+e+"</p>")
      }
      }//success
     })//ajax
     }//if(isOK)
     else
     {
      $(".loading").append("<br/>~~你是向下滾了,但是上次還沒有執(zhí)行完畢,等等吧<br/>")
     }
   }// 觸法ajax條件
   })//scroll
})//Jquery 結(jié)束處

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)

希望本文所述對大家jQuery程序設(shè)計有所幫助。

相關(guān)文章

最新評論