2013년 9월 22일 일요일

제이쿼리 무한 스크롤, 제이쿼리 강좌, 제이쿼리교육, 제이쿼리강의 jQuery를 통한 무한 스크롤 구현

제이쿼리 무한 스크롤, 제이쿼리 강좌, 제이쿼리교육, 제이쿼리강의

jQuery를 통한 무한 스크롤 구현
window객체에 scroll 이벤트 연결원리
사용자가 마우스  스크롤 움직이면 scroll 이벤트 발생
무한 스크롤 만들려면 화면 끝까지 스크롤이 도달 했다는 사실 인식 필요
   document 객체의 height 속성은 문서 전체의 높이의미
   스크롤이 끝까지 내려가면  window객체 scrollTop +height=document 객체높이
<script type="text/javascript">
$(document).ready(function() {
//스크롤 이벤트 발생 시
$(window).scroll(function() {
var scrollHeight = $(window).scrollTop()+$(window).height();
var documentHeight = $(document).height();
if (scrollHeight = documentHeight) {
for(var i=0; i <10; i++) {
$("<h1>무한 스크롤 </h1>").appendTo("body");
}
}
});
});
$(document).ready(function() {
for(var i=0; i<20; i++) {
$("<h1>무한 스크롤</h1>").appendTo("body");
}
});
</script><body></body>

 


오라클자바커뮤니티에서 설립한 개발자교육6년차 오엔제이프로그래밍 실무교육센터
(오라클SQL,튜닝,힌트,자바프레임워크,안드로이드,아이폰,닷넷 실무개발강의)  


작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)