이 기사의 예에서는 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.