jquery.rotate.js 轉盤抽獎示例
阿新 • • 發佈:2018-12-15
使用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; // 標誌為 執行完畢 } }); }; });