728x90
반응형
<!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">
<script src="../js/jquery.min.js"></script>
<style>
#box{
width:100px;
height:100px;
background-color: antiquewhite;
position: relative;
top:100px;
left:300px;
}
</style>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#box").animate({"margin-top":"-=100px"})
})
$("#btn2").click(function(){
$("#box").animate({"margin-top":"+=100px"})
})
$("#btn3").click(function(){
$("#box").animate({"margin-left":"-=100px"})
})
$("#btn4").click(function(){
$("#box").animate({"margin-left":"+=100px"})
})
$("#btn5").click(function(){
$("#box").animate({"margin-left":"0px","margin-top":"0px"})
})
$(document).on("keydown",keyEventFnc)
function keyEventFnc(e){ //e에 인풋정보가 담김
var direct="";
switch(e.keyCode){
case 37: //왼쪽 방향키 키코드
$("#box").animate({"margin-left":"-=100px"})
direct="←";
break;
case 38://위쪽 방향키 키코드
$("#box").animate({"margin-top":"-=100px"})
direct="↑";
break;
case 39://오른쪽 방향키 키코드
$("#box").animate({"margin-left":"+=100px"})
direct="→";
break;
case 40://아래쪽 방향키 키코드
$("#box").animate({"margin-top":"+=100px"})
direct="↓";
break;
}
if(direct){
$("#user_id").val(direct)
console.log(direct)
}
}
})
</script>
<title>Document</title>
</head>
<body>
<!-- 애니메이션 : animation -->
<!-- hide,sohw,toggle -->
<!-- slideUp,slideDown,slideToggle -->
<!-- fadeIn, fadeOut, fadeToggle , fadeTo -->
<!-- animate -->
<button class = "btnn" id="btn" value="1">상</button>
<button class = "btnn" id="btn2">하</button>
<button class = "btnn" id="btn3">좌</button>
<button class = "btnn" id="btn4">우</button>
<button class = "btnn" id="btn5">복귀</button>
<input type="text" name="user_id" id="user_id">
<div id="box">
박스
</div>
</body>
</html>
animate( { "css종류" : "값" } ) 으로 사용
keydown기능으로 키보드입력으로도 animate 가능
728x90
반응형
'HTML+CSS(복습)' 카테고리의 다른 글
| 2023-05-17(수) fadeIn , fadeOut , fadeToggle , fadeTo (0) | 2023.05.17 |
|---|---|
| 2023-05-17(수) slideUp , slideDown , slideToggle (0) | 2023.05.17 |
| 2023-05-17(수) show , hide , toggle (0) | 2023.05.17 |
| 2023-05-16(화) off(이벤트해제) (0) | 2023.05.17 |
| 2023-05-16(화) mouseover , mouseout (0) | 2023.05.17 |