[21.10.15] exam04(05_jQueryAnimation)

JAVA_EE/JQuery
[21.10.15] exam04(05_jQueryAnimation)

luvforjunk 2021. 10. 15. 12:20
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#thumb {
	padding: 0;
	margin: 0;
	list-style: none;
	width: 100px;
	float: left;
}

#thumb li {
	padding: 5px 10px;
}

#thumb img {
	width: 80px;
	height: 80px;
}

#view {
	padding: 5px 0;
	width: 360px;
	height: 270px;
	float: left;
}

#view img {
	width: 100%;
	height: 100%;
}
</style>
</head>
<body>
	<ul id="thumb">
		<li><a href="../img/img5.PNG" class="item">
			<img src="../img/img5.PNG"></a></li>
		<li><a href="../img/img9.PNG" class="item">
			<img src="../img/img9.PNG"></a></li>
		<li><a href="../img/img7.PNG" class="item">
			<img src="../img/img7.PNG"></a></li>
	</ul>

	<div id="view">
		<img src="../img/img8.PNG" /><!-- 큰 이미지 -->
	</div>

	<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
$(function(){
	$('.item:eq(0)').click(function(){
		var image = $(this).attr('href');
	
	$('#view').hide(500, function(){
		$('view img').attr('src', image);
		$(this).show(300);
	});
	return false;
	});
	
	$('.item:eq(1)').click(function(){
		var image = $(this).attr('href');
	
	$('#view').hide(500, function(){
		$('view img').attr('src', image);
		$(this).show(300);
	});
	return false;
	});
});
</script>

</body>
</html>

<!-- 
- 모든 애니메이션 관련 함수들은 시간값 외에 두 번째 파라미터로 함수를 지정할 수 있다.
- 이 함수들에 애니메이션 처리가 종료된 후에 동작할 내용을 담는다.

예) show(time [, function() {......}]);
 -->
728x90