티스토리 뷰
룰렛게임 자바스크립트 (with. 제이쿼리, jqueryrotate library)
※ 경고. 연구용도를 제외한 소스와 결과물의 '상업적 이용'을 절대 금합니다.
수정 : 2015.06.18
직접 ccs3의 속성을 이용하여 구현할 수도 있겠지만, 브라우저의 가장 큰 문제는 호환성이기에..
이것저것 두루두루 따져보았을 때 아래의 jqueryrotate plugin은 이러한 문제를 간편하게 해결해주며 사용법 또한 직관적이다.
이 플러그인을 가지고 degree를 계산하여 룰렛을 만들어보았다.
https://code.google.com/p/jqueryrotate/
http://beneposto.pl/jqueryrotate/
This is a small plugin for jQuery that adds a nice feature to rotate images (img html objects) by a given angle on web pages.
An experimental version 3 tries to rotate all objects, but with some small issues.
You can find 3rd version in here
Description:
This is a simple plugin to allow you to rotate images (any angle) directly on client side
(for ex. user generated content), and animate them using own functions.
Main focus is to unify this behavior across different browsers.
Supported Browsers:
Internet Explorer 6.0 >
Firefox 2.0 >
Safari 3 >
Opera 9 >
Google Chrome
Notices:
Include script after including main jQuery.
Whole plugin uses jQuery namespace and should be compatible with older version (unchecked).
Please put all issues into a ISSUES page.
If you want - you can also checkout repository and path the code on your own.
If you do that please send me patch so I can apply it into trunk.
Implementation:
To support so many old browsers there are few techniques being used:
For modern browsers (Safari, Chrome, Opera, IE 9) plugin uses native CSS3 attributes (-ms-transform, -transform-property, -webkit-transform, -o-transform).
For older browsers with CANVAS support image is being replaced by a CANVAS component that can be easily rotated using internal canvas methods,
For older IE browsers VML is being used,
- 간략한 해석을 덧붙이자면 :
HTML의 IMG 개체를 회전하는 jQuery기반의 플러그인.
버전 3부터는 모든 개체를 회전가능하지만 몇 가지 작은 문제가 있으므로 참고할 것(테스트필요)
- 지원되는 브라우저 :
인터넷 익스플로러 6.0 >
파이어 폭스 2.0 >
사파리 3 >
오페라 9 >
구글 크롬
- 주요사항 :
jQuery 를 포함하여야 하기 때문에 네임 스페이스를 사용하여 이전 버전과 호환되어야 한다.
일단 신형 브라우저에서는 CSS3를 기반으로 하지만 구형 브라우저는 Canvas및 VML(구형IE)로
내부구현을하기 때문에 대체되어 사용된다.
Download
http://beneposto.pl/jqueryrotate/
THX to Wilq32 :)
API
소스
간단하게 %(모듈러스 연산)과 360도, 그리고 이미지의 각도의 오차 (여기서는 수치를 18로 측정하였다)를
가지고 샘플을 만들어 보았다.
jqueryrotate - (이미지회전).zip<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> prototype about roulette </title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<style>
#image{
margin:50px 50px;z-index:10;
}
#n_id{position:absolute;left:286px;top:75px;z-index:20;}
</style>
</head>
<body>
<img src="img/roulette.png" id="image">
<img src="img/niddle.png" id="n_id">
<br />
<input type='button' value='시작' id='start_btn'></input>
<div id="result_id"></div>
<div id="result_id2"></div>
<div id="result_id3"></div>
<script>
/* serpiko.tistory.com */
window.onload = function(){
var pArr = ["0","1","2","3","4:꽝","5","6","7","8","9"];
$('#start_btn').click(function(){
rotation();
});
function rotation(){
$("#image").rotate({
angle:0,
animateTo:360 * 5 + randomize(0, 360),
center: ["50%", "50%"],
easing: $.easing.easeInOutElastic,
callback: function(){
var n = $(this).getRotateAngle();
endAnimate(n);
},
duration:5000
});
}
function endAnimate($n){
var n = $n;
$('#result_id').html("<p>움직인각도:" + n + "</p>");
var real_angle = n%360 +18;
var part = Math.floor(real_angle/36);
$('#result_id2').html("<p>상품범위:" + part + "</p>");
if(part < 1){
$('#result_id3').html("<p>당첨내역:" + pArr[0] + "</p>");
return;
}
if(part >= 10){
$('#result_id3').html("<p>당첨내역:" + pArr[pArr.length-1] + "</p>");
return;
}
$('#result_id3').html("<p>당첨내역:" + pArr[part] + "</p>");
}
function randomize($min, $max){
return Math.floor(Math.random() * ($max - $min + 1)) + $min;
}
};
</script>
</body>
</html>
결과물
n%360 +18; 에서 각도의 범위(오차)만 손봐주면 더욱 정교한 판정이 가능하다.
일단 구현에 목표를 맞추었으므로 이정도까지만 한다.
http://serpiko.dothome.co.kr/javascript/jquery/jqueryrotate/index.html
'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글
| jquery UI를 사용한 resizable 실무 (0) | 2016.04.01 |
|---|---|
| accordion menu tutorial (css3 + jquery ) (0) | 2015.07.06 |
| How to export HTML table data to excel sheet using Jquery (1) | 2015.03.05 |
| 체크박스 전체 선택하기 (0) | 2014.11.26 |
| 제이쿼리 선택자의 종류와 방법 (0) | 2014.03.12 |