티스토리 뷰

HTML&CSS&Javscript&Jquery

190826 셀렉트, 스크롤 바닥 됐을때 다음 내용 이어붙이기

猫猫 2019. 8. 26. 21:49
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Other events</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>

	 $(function(){
		 
		 $("select").change(function(){
			 var p = $(this).val();
			 $("h1").text(p);
		 });
		 // document : 이 html파일
		 // navigator : 브라우저 (기능적인 측면)
		 //alert(navigator.userAgent); 무슨 브라우저 쓰는지 체크
		 //window : 브라우저 (디자인적인 측면,사이즈 이런거 )
		 $(window).resize(function(){ //시작할때 한번, 끝날때 한번 실행됨
			 									//사이즈 줄면 디자인 바뀌는 사이트같은거
			var w = $(window).width();
		 	var h = $(window).height();
			$("h1").text("window width: "+ w+", window height: "+h);
		 });
		 
		 var arr = [
				 "1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>",
				 "2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>",
				 "3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>",
				 "4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>"
			 ];
		 
		 var p = -1;
		 $(window).scroll(function(){
			 //시작할때 한번, 끝날때 한번
			 //요즘 유행하는게 맨위에 10개만 보여주고 
			 //스크롤 바닥에 닿으면 다음페이지로 넘어감.
			 var dh = $(document).height();//작업한 html의 높이  1439
			
			 var wh = $(window).height(); //브라우저 높이 535
			 var bo = $(window).scrollTop();//스크롤 시켜서 너 어디있어?
					 
			 if(bo+wh ==dh){//bo+bh = 브라우저 바닥좌표
				 //alert("bottom"); //이때 다음페이지를 가져오게 하면 된다.
				  p++;
				 $("body").append(arr[p]); //body에 갖다 붙임 arr[p]번째
			 }
			 
		 });
		 
		 
	 });


</script>




</head>


<body>
	<h1> 결과 나올 자리</h1>
	<select>
		<option> pen</option>
		<option>pencil</option>
		<option>ball-pen</option>		
	</select>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	asdlkfjasldkjfasF<br>
	
	
</body>
</html>
반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

class 로 셀렉트 박스 들 초기화 시키기  (0) 2020.06.26
190826 메뉴 클릭 시 애니메이트로 메뉴 이동시키기  (0) 2019.08.26
190826 키보드 이벤트  (0) 2019.08.26
190826 마우스 이벤트  (0) 2019.08.26
190812 foreach 예제  (0) 2019.08.23