이렇게 생긴 배경 이미지에서
이렇게 킹받게 생긴 말이 움직이게 만드는 웹페이지를 만들어보자..!!
CSS는 외부 방식을 사용하였고 이 css파일에 보면
배경이미지가 width: 1280px, height: 720px 의 크기로 설정되어있다.
그리고 left, right라는 클래스 이름으로 버튼 스타일도 정해져있다.
이 클래스를 이용해서 왼쪽으로 가는 버튼, 오른쪽으로 가는 버튼을 만들어주었다.
그리고 div 태그에 말 이미지를 가져왔다
<!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="moveImgStyle.css">
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="bg">
<img src='horse.png'>
<button class="btn left" onclick="left()">LEFT</button>
<button class="btn right" onclick="right()">RIGHT</button>
</div>
<script>
let pos =0 // 말의 위치 저장 변수
let ro = 0 // 말의 각도 저장 변수
function left(){
// 말 이미지가 배경화면 밖으로 나가지 않기 위해 1200이하라는 조건을 줬다
if(pos<1200){
pos+=100}
ro+=45
// 말 위치 움직이기
$("img").css("right",pos+"px")
// 말 각도 움직이기
$("img").css("transform","rotate("+ro+"deg)")
}
function right(){
if(pos>0){
pos-=100}
ro-=45
$("img").css("right",pos+"px")
$("img").css("transform","rotate("+ro+"deg)")
}
</script>
</body>
</html>실행화면
'웹 개발 언어 > JavaScript' 카테고리의 다른 글
| 영화진흥위원회 Open API를 이용한 JSON 실습 (0) | 2022.04.03 |
|---|---|
| Ajax와 JSON (0) | 2022.04.03 |
| Javascript - jQuery방식 (0) | 2022.03.30 |
| JavaScript - DOM 개념과 간단한 실습! (0) | 2022.03.27 |
| Javascript 객체 (0) | 2022.03.21 |
댓글