大转盘抽奖，主要通过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>
效果如下：
