实现效果:
抽奖函数代码
// 抽奖函数
cjstatus = false;
$("#start").on("click", function() {
if (cjstatus) {
return;
}
cjstatus = true;
$.ajax({
type: "get",
dataType: "jsonp",
url:
"//api接口地址",
success: function(res) {
// console.log(res)
if (res.msg.indexOf("登录") > -1) {
layer.open({
content: "登陆才能抽奖",
btn: ["确定", "取消"],
yes: function(index) {
window.location.href = "登录页面";
}
});
return;
}
if (res.status < 0) {
layer.open({
content: res.msg,
skin: "msg",
time: 2
});
cjstatus = false;
return;
}
var imgUrl = ""; //图片地址
rotate = 0; //角度
// 中奖等级
switch (res.status) {
case 0: //谢谢参与
rotate = 3600 + 45 * 3 - 22.5;
imgUrl = "弹窗的图片地址";
break;
case 1: //20积分
rotate = 3600 + 45 * 5 - 22.5;
imgUrl = "弹窗的图片";
break;
case 2: //50积分
rotate = 3600 + 45 * 6 - 22.5;
imgUrl = "弹窗的图片";
break;
case 3: //100积分
rotate = 3600 + 45 * 4 - 22.5;
imgUrl = "弹窗的图片";
break;
case 4: //5元优惠券
rotate = 3600 + 45 - 22.5;
imgUrl = "弹窗的图片";
break;
case 5: //99减10
rotate = 3600 + 45 * 7 - 22.5;
imgUrl = "弹窗的图片";
break;
case 6: //299减50
rotate = 3600 + 45 * 2 - 22.5;
imgUrl = "弹窗的图片";
break;
case 7: //100元优惠券
rotate = 3600 - 22.5;
imgUrl = "弹窗的图片";
break;
}
rotateFunc(rotate, 3000, imgUrl);
// }
},
error: function(e) {}
});
});
//转盘
function rotateFunc(angle, dur, imgUrl) {
$(".rotate-bg").rotate({
angle: 0, //旋转到指定的角度
animateTo: angle, //旋转到指定的角度
duration: dur, //持续时间
callback: function() {
// layer是一个基于jQuery的弹窗插件
layer.open({
type: 1,
content: `<div class="test">
<img src="${imgUrl}"/><a onclick="closeDialog()"></a><div>`,
anim: false,
fixed: true,
shade: true,
className: "test-css"
});
cjstatus = false;
}
});
}
因为转盘的旋转顺序是顺时针转动的,每一格的角度是45度,指针指向的刚好是格子的中间部分,就是45/2 = 22.5度,计算角度的时候逆时针计算即可。
例如要计算旋转后指针停留在【全场满299-50】优惠券角度:
3600 + 45 * 2 - 22.5; 更多参数和技术细节可以参考这个Demo:jqueryrotate积分抽奖效果演示