1. 程式人生 > 實用技巧 >jq+css實現轉盤抽獎

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即可;