211007_animate,active,image
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<style type="text/css">
/* gun.png의 사이즈 300*500 */
#gun{
width: 300px;
height: 250px;
background-image: url("../image/gun.png");
}
#gun:active {
background-position: right bottom; /* 100% 100%와 같음 */
}
div.cover{
position: absolute;
left: 100px;
top: 350px;
background-image: url("../image/cover.png");
width: 350px;
height: 300px;
background-size: 350px 300px;
z-index: 2;
}
div.cd1{
position: absolute;
left: 280px;
top: 363px;
background-image: url("../image/cd-sprite.png");
width: 300px;
height: 290px;
background-size: 300px 870px; /* size 높이는 height의 3배 */
z-index: 1;
}
div.buttons {
position: absolute;
left: 200px;
top: 700px;
}
div.buttons button {
width: 100px;
height: 100px;
border-radius: 100px;
margin-right: 20px;
background-color: #afeeee;
color: #fff;
font-size: 2em;
font-family: 'Do Hyeon';
cursor: pointer;
}
div.buttons button:hover {
box-shadow: 5px 5px 5px gray;
}
</style>
<script type="text/javascript">
$(function () {
/* pos를 두가지중 한가지만 쓰면 나머지는 자동으로 center
x% y% x는 가로,y는 세로 위치
0% 0%는 left top
100% 100% right bottom
한가지만 사용시 나머지는 50%(center) */
//버튼1
$("#btn1").click(function() {
var pos=$("div.cd1").css("background-position");
if(pos=='0% 0%') { //0% 0%는 left top.. 100% 100%는 right bottom
alert("현재 1번 CD입니다");
} else {
//그냥 확 바뀜
//$("div.cd1").css("background-position","left top");
//애니메이션 적용되게 바꾸기
$("div.cd1").animate({left:'120px'},500,function(){
$("div.cd1").css("background-position","left top");
$(this).animate({left:'280px'},500);
});
}
});
//버튼2
$("#btn2").click(function() {
var pos=$("div.cd1").css("background-position");
if(pos=='0% 50%') { //중간
alert("현재 2번 CD입니다");
} else {
//$("div.cd1").css("background-position","left center");
$("div.cd1").animate({left:'120px'},500,function(){
$("div.cd1").css("background-position","left center");
$(this).animate({left:'280px'},500);
});
}
});
//버튼3
$("#btn3").click(function() {
var pos=$("div.cd1").css("background-position");
if(pos=='0% 100%') {
alert("현재 3번 CD입니다");
} else {
//$("div.cd1").css("background-position","left bottom");
$("div.cd1").animate({left:'120px'},500,function(){
$("div.cd1").css("background-position","left bottom");
$(this).animate({left:'280px'},500);
});
}
});
});
</script>
</head>
<body>
<h2>전체 이미지중 일부만 나타내기</h2>
<div id="gun"></div>
<hr>
<div class="cover"></div>
<div class="cd1"></div>
<div class="buttons">
<button type="button" id="btn1">CD1</button>
<button type="button" id="btn2">CD2</button>
<button type="button" id="btn3">CD3</button>
</div>
</body>
</html>
