首页 > 编程 > JavaScript > 正文

jQuery实现无限往下滚动效果代码

2019-11-20 10:15:20
字体:
来源:转载
供稿:网友

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表