jq+css實現轉盤抽獎
阿新 • • 發佈:2020-11-30
轉盤抽獎是我們常見到的一些客戶端活動模版,其核心使用的方法是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即可;