K-DigitalTraining 강의/7. JQuery
[8주차] 28. 사진을 위 아래 혹은 좌우로 부드럽게 움직이게 하기 [ animate() ]
이대곤
2022. 7. 17. 11:08
* 좌우 이동은 첫번째 이미지의 왼쪽 공백 만을 이용해서 작성 가능했음
* 상하 이동은 아마도 첫번째 이미지의 위쪽 공백을 이용하지 않을까?
1) .animate({ }, 시간)
인자로 준 시간동안 부드럽게 { } 의 부분이 적용되며, 좌우,상하로 이미지를 부드럽게 움직일 수 있음.
사용예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex07_animate.html</title>
<style>
#region {
width: 200px; height:200px;
overflow:hidden; /* 지정한 width, height를 넘어가는건 눈에만 안보이게 숨겨라 */
margin:auto;
}
#images{ /* 이미지들이 가로로 3장 배치될 수 있도록 200px * 3장*/
width: 600px; height: 200px;
border:1px solid black;
}
#images a img { /* 이미지 1개 너비 200px */
width:200px; height:200px;
}
/* 이하는 버튼이 띄워지는 영역 관련 CSS */
#direction {
width: 360px; margin:auto;
}
.leftbtn{
margin-top:10px;
}
.rightbtn{
margin-left:290px;
margin-top:10px;
}
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var i = -1;
$('.leftbtn').click(function(){
if(i == 1){
alert("마지막 이미지 입니다.");
return;
}
// { } 에는 왼쪽 여백이 줄어드는 코드를 작성
$('#firstimage').animate({marginLeft : '-=205px'}, 1000);
i++;
});
$('.rightbtn').click(function(){
if(i == -1){
alert("첫번째 이미지 입니다.");
return;
}
// { } 에는 줄어든 여백을 다시 늘려주는 코드를 작성
$('#firstimage').animate({marginLeft : '+=205px'}, 1000);
i--;
});
});
</script>
</head>
<body>
<!-- 사진이 보여지는 영역 -->
<div id="region">
<div id="images">
<a href="#"><img src="../images/b.jpg" id="firstimage" /></a>
<a href="#"><img src="../images/c.jpg" id="secondimage" /></a>
<a href="#"><img src="../images/d.jpg" id="thirdimage" /></a>
</div>
</div>
<!-- 버튼이 위치하는 영역 -->
<div id="direction">
<button class="leftbtn">«</button>
<button class="rightbtn">»</button>
</div>
</body>
</html>