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

前端之家收集整理的这篇文章主要介绍了jQuery实现无限往下滚动效果代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery实现无限往下滚动效果方法分享给大家供大家参考,具体如下:

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

$(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("
向上滚不执行") scrollH=document.documentElement.scrollTop;//记录新位置 return; } if(isOK)//如果是第一次或者上次执行完成了就执行本次 { scrollH=document.documentElement.scrollTop;//记录新位置 $(".loading").append("
~~执行了ajax。。。。。
") 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()+"
"); $(".main").append("结果:"+$(this).children('txtBody1').text()+"
"); $(".main").append("结果:"+$(this).children('txtBody2').text()+"
"); $(".main").append("结果:"+$(this).children('txtBody3').text()+"
"); $(".main").append("结果:"+$(this).children('txtBody4').text()+"
"); $(".main").append("结果:"+$(this).children('ID').text()+"
"); })//each } catch(e){ $(".main").append("

"+e+"

") } }//success })//ajax }//if(isOK) else { $(".loading").append("
~~你是向下滚了,但是上次还没有执行完毕,等等吧
") } }// 触法ajax条件 })//scroll })//Jquery 结束处

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《插件用法总结》

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

猜你在找的jQuery相关文章