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：http://www.jq22.com/jquery-info2434