菜单

jQuery达成Infiniti往下滚动作效果应代码_jquery_脚本之家

2020年3月12日 - 新闻中心

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

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

body{ font-family: "Trebuchet MS",verdana,arial;}#loading{ display:none; font-weight:bold;color:#FF0000;}p { padding:10px;}loading data... ${ var isOK=true;//记录上次访问是否已经结束,如果ajax也有线程就好了 var scrollH=0;//判断是往上滚还是往下滚 var intI=1; // loading层是固定在页脚的记录牌 $.css({"right":"2","bottom":0}); $ .ajaxStart{ isOK=false;//执行ajax的时候把isOK设置成false防止第一次没有执行完的情况下执行第二次易出错 $; }) .ajaxStop{ isOK=true; $; }) $.scroll{ //控制load层 document.getElementByIdx_x_x.style.top=document.documentElement.scrollTop+"px"; //触法ajax条件 可以换算成百分比更好 if-$-document.documentElement.clientHeight<240){ //当前位置比上次的小就是往上滚动不要执行ajax代码块 if(scrollH>document.documentElement.scrollTopY) { $.append scrollH=document.documentElement.scrollTop;//记录新位置 return; } if//如果是第一次或者上次执行完成了就执行本次 { scrollH=document.documentElement.scrollTop;//记录新位置 $.append("
~~执行了ajax。。。。。
") isOK=false; $.ajax({ type:"POST", dataType: 'xml', url:"http://localhost:49302/MY100/2010/WebService1.asmx/getDS", error:function.append }, success:function.find.each{ $.append.children+"
"); $.append.children+"
"); $.append.children+"
"); $.append.children+"
"); $.append.children+"
"); $.append.children; })//each } catch.append } }//success })//ajax }//if else { $.append("
~~你是向下滚了,但是上次还没有执行完毕,等等吧
") } }// 触法ajax条件 })//scroll})//Jquery 结束处

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图