다연이네

[days02] 복습 - 1) video태그 / 2) 무한 스크롤 본문

Web/jQuery

[days02] 복습 - 1) video태그 / 2) 무한 스크롤

　다연　 2020. 12. 21. 12:52
반응형

동영상이 재생되고 있다. 좌측 하단 버튼을 누르면 동영상을 멈추고 / 다시 재생시킬 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
*{ box-sizing: border-box;}
body{
	margin:0;
	font-family: Arial;
	font-size: 17px;
}

#myVideo{
	position: fixed;
	right: 0;
	bottom:0;
	min-width: 100%;
	min-height: 100%;
}
.content{
	position: fixed;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	color: #f1f1f1;
	width: 100%;
	padding: 20px;
}

#myBtn{
	widows: 200px;
	font-size: 18px;
	padding: 10px;
	border: none;
	background: #000;
	color: #fff;
	cursor: pointer;
}

#myBtn:hover { 
	color: #f1f1f1;
}

</style>

</head>
<body>
<video autoplay muted loop id="myVideo"> <!-- muted : 소리제거 -->
	<source src="http://localhost/webPro/javascript/images/rain.mp4">
	Your browser does not support HTML5 video. 
	<!-- 적용 안될시 해당 메시지 출력 -->
</video>

<div class="content">
	<h1>Heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	 Nulla delectus magni recusandae ab placeat laudantium quod.
	  Dolorum et suscipit ea!</p>
	<button id="myBtn" onclick="myFunction()">Pause</button>
</div>

<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
	if(video.paused){
		video.play();
		btn.innerHTML = "Pause";
	}else{
		video.pause();
		btn.innerHTML = "Play";
	}
}
</script>
</body>
</html>

 

 

무한 스크롤 
사용자가 스크롤을 끝까지 내리면 자동으로 데이터를 추가해 스크롤이 끝나지 않게 만들어주는 기능
=> Ajax 통신 필요, 언제 비동기 요청을 보낼 것인지에 대한 알고리즘이 필요

 

* 전체 문서 높이가 스크롤 높이와 웹 브라우저 창의 높이를 더한 값과 같은지 조건 확인

(이 조건을 충족해야만 데이터를 추가하는 단순한 코드)

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
//무한 스크롤
//스크롤이 어느 위치에 도달하면 다음 데이터를 가져오는 기법을 의미합니다.
//=> Ajax 통신 필요, 언제 비동기 요청을 보낼 것인지에 대한 알고리즘이 필요
$(function() {
	var appendDocument = function() {
		for (var i = 0; i <20; i++) {
			$("<h1>Infinity Scroll - "+i+"</h1>").appendTo("body");
		}
	};
	
	appendDocument();
	
	$(window).scroll(function() {
		var scrollHeight = $(window).scrollTop()+$(window).height();
		//			올라간 높이+현재 보이는 높이
		var documentHeight = $(document).height(); //전체높이
		
		//30px 남아있을때 추가 
		if(scrollHeight +30> documentHeight){
			appendDocument();
		}
	});
});
</script>
</body>
</html>

 

 

반응형
저작자표시 비영리

'Web > jQuery' 카테고리의 다른 글

[days02] 복습 - attr()  (0) 2020.12.21
[days02] 복습 - 1) 콜백함수 / 2) $.each()  (0) 2020.12.21
[days02] 복습 - 1) optgroup / 2) 미디어 쿼리 설정  (0) 2020.12.21
[days02] 복습 - 의미없는 이미지, 회원가입 폼  (0) 2020.12.21
[days01] jQuery란?  (0) 2020.12.18
'Web/jQuery' Related Articles more
Comments