使用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; // 标志为 执行完毕
}
});
};
});