Web/jQuery
[days02] 복습 - 1) 프레임 애니메이션 / 2) 문서 객체 생성과 추가
다연
2020. 12. 21. 20:28
반응형
프레임 애니메이션
setInterval() 함수
포털 사이트 메인 페이지의 실시간 검색어 (일정 시간마다 서버에 데이터를 요청해 사용자에게 보여줌)
이 함수를 이용해 간단한 프레임 애니메이션을 만들어보자
 |
 |
 |
 |
러닝머신 하듯 제자리에서 뛰는 느낌
(여러장의 사진을 이어붙혀 마치 영상처럼 느껴진다.)
<!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>
<script>
window.onload = function() {
var count = 0;
var image = document.getElementById("image");
var frames =[
'0.png', '1.png', '2.png', '3.png', '4.png',
'5.png', '6.png', '7.png', '8.png', '9.png',
'10.png', '11.png', '12.png', '13.png', '14.png'
];
//타이어 반복
setInterval(function() {
image.src = "../images/"+frames[count%frames.length];
count = count+1;
}, 50);
};
</head>
<body>
<img src="" id="image" alt="" />
</body>
</html>jQuery로 수정
<script>
$(function() {
var count = 0;
var $img = $("#image");
setInterval(function() {
$img
.attr("src","../images/"+(count++)+".png");
count = count+1 > 14 ? 0 : count;
}, 50);
});
</script>
문서 객체 생성과 추가
A.append(B) == B.appendTo(A)
A.before(B) == B.beforeTo(A)
A.after(B) == B.afterTo(A)
A.prepend(B) == B.prependTo(A)
<!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>
$(function() {
//p421
for (var i = 0; i <3; i++) {
$("<h1></h1>")
.text("Create Document Object +" + i)
.appendTo("body")
.css({
background:"black",
color:"white"
});
}
});
</script>
</body>
</html>반응형