1. 程式人生 > >jquery.rotate.js 轉盤抽獎示例

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; // 標誌為 執行完畢
			}
		});
	};
	
});