js 大轉盤抽獎

看到網頁上有不少大轉盤抽獎的應用,心血來潮也想弄個.於是找瞭點資料自己研究瞭下
queryRotate 這個插件就可以實現這個功能
jqueryRotate：
支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高級瀏覽器下使用Transform，低版本ie使用VML實現
google code地址：https://code.google.com/p/jqueryrotate/
下面瞭解下這個插件怎麼使用

$("觸發轉動元素").rotate(45); //直接這樣子調用的話就是變換角度

$("觸發轉動元素").getRotateAngle(); //返回對象當前的角度

$("觸發轉動元素").stopRotare(); //停止旋轉動畫

$("觸發轉動元素").rotateRight() 向右旋轉90度 $("觸發轉動元素").rotateLeft()向左旋轉90度。

$("觸發轉動元素").rotate({ 　
　　　　  angle:0,  //起始角度
　　　　　animateTo:180,  //結束的角度
　　　　　duration:3000， //轉動時間
　　　　　callback:function(){}, //回調函數
　　　　　easing:$.easing.easeOutSine // $.easing.easeInOutExpo 運動的效果，需要引用jquery.easing.min.js的文件
　 })

大轉盤原理:隨機出一個數字,通過後臺算出在那個概率區間返回指定跳轉的角度 例

一等獎 概率1% 如果在1-100 隨機出100則跳轉一等獎的角度范圍內

二等獎 概率2% 如果在1-100 隨機出99-98則跳轉二等獎的角度范圍內

三等獎 概率97% 如果在1-100 隨機出97-1則跳轉三等獎的角度范圍內

下面以一個簡單demo為例子

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="zp.js"></script>

body {
	background: url(bg.png) 0 0 repeat;
}

.rotate-content {
	width: 270px;
	position: relative;
	height: 270px;
	background: url(activity-lottery-bg.png)
		no-repeat 0 0;
	background-size: 100% 100%;
	margin: 0 auto
}

.rotate-con-pan {
	background: url(disk.jpg)
		no-repeat 0 0;
	background-size: 100% 100%;
	position: relative;
	width: 255px;
	height: 255px;
	padding-top: 15px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0 auto
}

.rotate-con-zhen {
	width: 112px;
	height: 224px;
	background: url(start.png)
		no-repeat 0 0;
	background-size: 100% 100%;
	margin: 0 auto
}







						

							

						

					


<script type="text/javascript">
$(function(){
	$(".rotate-con-zhen").rotate({
		bind:{
			click:function(){
				var a = runzp();
				 $(this).rotate({
					 	duration:3000,
					 	angle: 0, 
            			animateTo:1440+a.angle,
						easing: $.easing.easeOutSine,
						callback: function(){
							alert(a.prize+a.message);
						}
				 });
			}
		}
	});
});
</script>

zp.js

/****************************************************
 *	 Author :	xuyw			    *
 *	 Version:   v1.0		            *
 *   Email  :   xyw10000@163.com                    *
****************************************************/

function randomnum(smin, smax) {// 獲取2個值之間的隨機數
	var Range = smax - smin;
	var Rand = Math.random();
	return (smin + Math.round(Rand * Range));
}

function runzp() {
	var data = '[{"id":1,"prize":"590大洋","v":1.0},{"id":2,"prize":"100RMB","v":2.0},{"id":3,"prize":"安慰獎","v":48.0}]';// 獎項json
	var obj = eval('(' + data + ')');
	var result = randomnum(1, 100);
	var line = 0;
	var temp = 0;
	var returnobj = "0";
	var index = 0;

	//alert("隨機數"+result);
	for ( var i = 0; i  line && result <= (line + c)) {
				index = i;
				// alert(i+"中獎"+line+"<result"+"<="+(line + c));
				returnobj = obj2;
				break;
			}
		}
	}
	var angle = 330;
	var message = "";
	var myreturn = new Object;
	if (returnobj != "0") {// 有獎
		message = "恭喜中獎瞭";
		var angle0 = [ 344, 373 ];
		var angle1 = [ 226, 256 ];
		var angle2 = [ 109, 136 ];
		switch (index) {
		case 0:// 一等獎
			var r0 = randomnum(angle0[0], angle0[1]);
			angle = r0;
			break;
		case 1:// 二等獎
			var r1 = randomnum(angle1[0], angle1[1]);
			angle = r1;
			break;
		case 2:// 三等獎
			var r2 = randomnum(angle2[0], angle2[1]);
			angle = r2;
			break;
		}
		myreturn.prize = returnobj.prize;
	} else {// 沒有
		message = "再接再厲";
		var angle3 = [ 17, 103 ];
		var angle4 = [ 197, 220 ];
		var angle5 = [ 259, 340 ];
		var r = randomnum(3, 5);
		var angle;
		switch (r) {
		case 3:
			var r3 = randomnum(angle3[0], angle3[1]);
			angle = r3;
			break;
		case 4:
			var r4 = randomnum(angle4[0], angle4[1]);
			angle = r4;
			break;
		case 5:
			var r5 = randomnum(angle5[0], angle5[1]);
			angle = r5;
			break;
		}
		myreturn.prize = "繼續努力!";

	}
	myreturn.angle = angle;
	myreturn.message = message;
	return myreturn;
}

首先 轉盤的角度取決於圖片,轉盤的業務決定代碼復雜度.望各位根據實際情況開發
附上我的小轉盤

源代碼下載地址https://pan.baidu.com/s/1kT6xtUv