jquery.rotate.js 转盘抽奖示例

使用jquery.rotate.js 插件简单的转盘抽奖示例：

1.引入jQuery和jquery.rotate.js插件

<script src="static/js/jquery.min.js"></script>
<script src="static/js/jquery.rotate.min.js"></script>

2.HTML

<div class="luck-draw">
	<div class="lottery-bg">
		<img src="">
	</div>
	<a id="playbtn" class="btn-play" href="javascript:void(0);" title="开始抽奖"></a>
</div>

3.js

$(function() {
	var $btn = $('.lottery-bg'); // 旋转的div	      
	var clickfunc = function() {
		var data = [1, 2, 3, 4, 5, 6]; //抽奖
		//data为随机出来的结果，根据概率后的结果
		data = data[Math.floor(Math.random() * data.length)]; //1~6的随机整数
		switch(data) {
			case 1:							
				rotateFunc(1, 0, '6666元京东购物卡');
				break;
			case 2:
				rotateFunc(2, 0, '0.36元微信红包');
				break;
			case 3:
				rotateFunc(3, 240, '0.56元微信红包');
				break;
			case 4:
				rotateFunc(4, 180, '0.68元微信红包');
				break;
			case 5:
				rotateFunc(5, 120, '爱奇艺视频黄金会员月卡');
				break;
			case 6:
				rotateFunc(6, 60, '华为Watch 2运动手表');
				break;
		}
	}
	$("#playbtn").click(function() {
		clickfunc();
	});
	var rotateFunc = function(awards, angle, text) {
		$btn.stopRotate();
		$btn.rotate({
			angle: 0, //旋转的角度数	
			duration: 5000, //旋转时间
			animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转    animateTo：从当前角度值动画旋转到给定的角度值 （或给定的角度参数）
			callback: function() {
				isture = false; // 标志为 执行完毕
			}
		});
	};
	
});