룰렛 스타일의 이벤트는 사용자에게 재미와 흥미를 제공하는 데 유용합니다. jQuery를 사용하여 이미지를 돌리는 간단한 룰렛 이벤트를 만들어보겠습니다.
1. HTML 구조
먼저 HTML 구조를 설정합니다. 룰렛 이미지와 시작 버튼을 포함하는 간단한 구조를 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roulette 이벤트</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="roulette-container">
<img src="roulette.png" alt="룰렛 이미지" class="roulette">
<button id="start-button">시작</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
2. CSS 스타일링
이미지와 버튼의 스타일을 원하는대로 추가합니다. 'styles.css' 파일을 사용하여 스타일링합니다.
/* styles.css */
.roulette-container {
text-align: center;
}
.roulette {
width: 300px;
transition: transform 5s ease-in-out;
}
#start-button {
font-size: 18px;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
}
3. jQuery로 룰렛 이벤트 구현
jQuery를 사용하여 룰렛 이미지를 회전시키는 JavaScript 코드를 작성합니다. 'script.js' 파일에 다음 내용을 추가합니다.
// script.js
$(document).ready(function () {
var spinning = false;
$("#start-button").click(function () {
if (!spinning) {
spinning = true;
var degrees = Math.floor(Math.random() * 360) + 3600;
var rotation = "rotate(" + degrees + "deg)";
$(".roulette").css({
"transform": rotation,
"transition": "transform 5s ease-out"
});
setTimeout(function () {
spinning = false;
alert("룰렛이 멈추었습니다!");
}, 5000); // 5초 후에 알림 표시
}
});
});
다른 예제
반응형
'Web Code > jQuery' 카테고리의 다른 글
| [jQuery] 플러그인 없는 아코디언 Accordion (0) | 2021.10.18 |
|---|---|
| [jQuery] 제이쿼리 keyup 숫자만 입력 가능한 input (0) | 2021.04.19 |
| (2) [jQuery] 제이쿼리 클릭(click) 시 show, hide / 보이기 숨기기 (0) | 2020.12.28 |
| (1) [jQuery] 제이쿼리 show, hide 이벤트 (0) | 2020.12.28 |
| [jQuery] 얼럿 / 컨펌 박스 띄우기 alert / confirm box 띄우기 / 경고창 안내창 띄우기 (0) | 2020.08.17 |
댓글