大轉盤抽獎，主要通過css3的"transform:rotate(0deg)"屬性來控制元素的旋轉角度來實現。
通常，抽獎的過程需要漸進的效果，所以直接通過旋轉屬性寫比較繁瑣。
這里推薦一款插件：http://www.jqueryrotate.com/
使用jqueryRotate插件來實現旋轉，可以設置持續時間和曲線，上手快，兼容強。
方法：
rotate(angle);
rotate(parameters);
getRotateAngle();
stopRotate();
1、rotate(0deg)直接傳一個角度。
2、rotate(parameters)，可選值如下：
| 參數名 | 類型 | 說明 |
| angle | Number | 旋轉到指定的角度，不帶動畫，默認是0 |
| animateTo | Number | 旋轉到指定的角度，使用動畫 |
| bind | Object | 可以傳入一個對象，作為事件綁定到元素上。 |
| center | Array | 用來設定旋轉的中心，傳入的數組是[X,Y]格式的，可以使用數值[100,100]或者百分比[“50%”,“50%”]，默認是以元素的中心點旋轉 |
| duration | Number | 指定動畫的持續時間，默認是1000毫秒 |
| step | Function | 傳入一個回調函數在動畫的每一步都會調用一下 |
| easing | Function | 讓動畫看起來更自然，感覺用不到，而且本人對圖形學沒啥研究，感興趣的官網有詳細描述，就不再深究了…. |
| callback | Function | 當動畫完成時的回調函數。 |
3、getRotateAngle() 獲取當前的角度。
4、stopRatate() 停止旋轉
關於jqueryRotate的使用可以多查文檔，以下為用jqueryRotate.js實現的簡易大轉盤，需要引入jquery.js和jqueryRotate.js。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <meta name="full-screen" content="yes"> <meta name="browsermode" content="application"> <meta name="full-screen" content="yes"> <meta name="browsermode" content="application"> <meta name="x5-orientation" content="portrait"> <title>大轉盤</title> </head> <style> .box { margin: 6vh auto; width: 80vw; height: 80vw; position: relative; border-radius: 100%; display: flex; flex-flow: row wrap; overflow: hidden; } .draw_item { width: 40vw; height: 40vw; text-align: center; line-height: 40vw; font-size: 3vw; color: #fff; } .needle { position: absolute; top: 36vw; left: 25vw; width: 30vw; height: 6vw; font-size: 6vw; color: #fff; font-weight: bold; text-align: center; line-height: 6vw; } button{ width: 20vw; height: 8vw; margin: auto; display: block; } </style> <body> <div class="box"> <div class="draw_item" style="background: red;">謝謝參與</div> <div class="draw_item" style="background: orange;">熱門電影票</div> <div class="draw_item" style="background: green;">品牌優惠券</div> <div class="draw_item" style="background: blue;">限量版公仔</div> <div class="needle">----></div> </div> <button id="btn">開啟轉盤</button> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript" src="js/jQueryRotate.js"></script> <script> //是否可以抽獎 var bRotate = true; var rotateFn = function(awards, angles, txt) { $('.needle').stopRotate(); $('.needle').rotate({ angle: 0, animateTo: angles + 2520, duration: 7000, callback: function() { //抽獎結果 alert(txt); } }) }; $('#btn').click(function() { if(!bRotate){ alert("沒有抽獎機會了"); return; } var item = 0; bRotate = !bRotate; switch(item) { case 0: rotateFn(0, 225, '謝謝參與'); break; case 1: rotateFn(1, 315, '熱門電影票'); break; case 2: rotateFn(2, 135, '品牌優惠券'); break; case 3: rotateFn(3, 45, '限量版公仔'); break; } }); </script> </body> </html>
效果如下：
