jq+css实现转盘抽奖

转盘抽奖是我们常见到的一些客户端活动模版，其核心使用的方法是rotate进行元素旋转，然后后台控制当前抽中的奖项，再有前台控制停留的位置；

设置奖项的js代码如下，当前转盘是六个选项栏；

var isRotate = false;
var isRotate = false;
$("#awardBtn").on("click", function() {
    if (isRotate) {
	return false
    };
    var _index = Math.floor(Math.random() * 6);
    console.log(_index);
    switch (_index) {
	case 0:
		rotateFunc(0, "名师直播课体验特权（30元）",true);
		break;
	case 1:
		rotateFunc(60, "谢谢参与）",false);
		break;
	case 2:
		rotateFunc(120, "名师直播课体验特权（30元）",true);
		break;
	case 3:
		rotateFunc(180, "谢谢参与",false);
		break;
	case 4:
    	        rotateFunc(240, "名师直播课体验特权（30元）",true);
		break;
	case 5:
		rotateFunc(300, "谢谢参与",false);
		break;
	default:
	    alert("error");
     	    break;
	    }
	})

其实 isRotate是防止多次点击做的开关；

控制转盘在deg角度停下的代码如下：

function rotateFunc(deg, text,pity) {
    isRotate = true;
    $("#award").rotate({
	angle: 0, // 旋转一个角度
	animateTo: Number(deg) + 3600, // 从当前的角度旋转到多少度
	duration: 3000, // 旋转持续时间
	callback: function() { // 旋转完成后的回调函数
		isRotate = false;
		if(pity){
			$(".maskPopContent").show()
		}else{
			alert("未中奖")
			}		
		}
	})
}

 代码引入jquery.rotate.min.js、jq即可；