jQuery实现转盘抽奖效果

实现效果：

抽奖函数代码 

// 抽奖函数
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积分抽奖效果演示