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>반응형