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