<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/moveImgStyle.css">
</head>
<body>
<div id="bg">
<img src="img/익명이.png">
<button class="btn left">LEFT</button>
<button class="btn right">RIGHT</button>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// 1. LEFT 버튼을 클릭했을 때 이벤트 처리하기
let px = 50;
let click = 0;
$('.left').on('click', function () {
// 2. 익명img를 가지고와서 왼쪽으로 50px 움직이기
// 마우스로 left를 23번 클릭 했을경우 다시 처음으로 돌아가기
if(click == 23){
click = -1
}
console.log(click)
// $('img').css('right', px * click)
// 부드럽게 움직일 수 있게끔 해주는 방법
// jquery 애니메이션 활용하기
// $('요소').animate({객체형태로 property}, 지속시간)
click++
$('img').animate({'right': px * click},200)
})
$('.right').on('click',function(){
// 제자리에서 마우스로 right를 클릭했을 경우 다시 제자리로 돌아오기
if(click == -1){
click = 1
}
console.log(click)
// $('img').css('right', px * click)
click--
$('img').animate({'right': px * click},200)
})
// 키보드를 눌렀을때 처리하는 방식으로 변경하기
// <- 왼쪽으로 움직이기
// -> 오른쪽으로 움직이기
// 키보드마다 keyCode -->
$('body').on('keydown', function (event) {
if (event.keyCode == 37) {
if(click == 24){
click = -1
}
click++
$('img').stop(true).animate({'right': px * click},300)
}
})
$('body').on('keydown', function(event){
if(event.keyCode == 39){
if(click == -1){
click = 1
}
click--
$('img').stop(true).animate({'right':px * click},300)
}
})
</script>
</body>
</html>
