다연이네

[days02] 복습 - 1) 프레임 애니메이션 / 2) 문서 객체 생성과 추가 본문

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>
반응형
저작자표시 비영리

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

[days02] 복습 - 갤러리  (0) 2020.12.21
[days02] 복습 - 플러그인(plug-in)  (0) 2020.12.21
[days02] 복습 - 1) 보이기/안보이기(~toggle) 2) 애니메이션(animate) 효과  (0) 2020.12.21
[days02] 복습 - on()/off() 이벤트 연결/제거  (0) 2020.12.21
[days02] 복습 - attr()  (0) 2020.12.21
'Web/jQuery' Related Articles more
Comments