zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    如何在ASP.NET中使用div弹出窗口
    How to avoid error "LNK2001 unresolved external" by using DEFINE_GUID
    一个JavaScript实现的幻灯片程序分析
    Systems Thinking in Project Management
    CSS
    How To Clear Floats Without Structural Markup
    Public Symbols and Private Symbols
    DOM and CSS positioning
    JavaScript对象模型执行模型
    JavaScript 操作图片
  • 原文地址:https://www.cnblogs.com/sauronblog/p/12035453.html
Copyright © 2011-2022 走看看