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减10rotate = 3600 + 45 * 7 - 22.5;imgUrl = "弹窗的图片";break;case 6: //299减50rotate = 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积分抽奖效果演示

jQuery实现转盘抽奖效果相关推荐

h5超简单大转盘抽奖效果（概率可控）
也不太会讲解,直接贴代码吧.内容很简单,应该都可以看懂 <!DOCTYPE html> <html lang="en"> <head><m ...
jquery php抽奖转盘,JQuery+PHP转盘抽奖程序源码下载
本站之前有提供过一个简单易扩展.可控性强的Jquery转盘抽奖程序,主要讲述了前端实现抽奖表现的部分,这里给出另一个完整的php转盘抽奖程序,通过使用jQuery和PHP来实现,用PHP后台代码控制抽 ...
React实现大转盘抽奖效果
React利用canvas实现大转盘抽奖效果,效果如下: 大转盘效果主要代码: const drawImg = (x, y, r, num, ctx, index, img) => {ctx. ...
让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果
前端时间有个需求是客户端双端APP内嵌入整个转盘抽奖的web子系统,具体是要在后台能够控制大转盘抽奖的奖项数,和用户免费抽奖的次数,并且免费抽奖使用完,用户可以观看广告进行抽奖或使用积分抽奖.正好最近 ...
php ajax 概率转盘,php+jquery实现转盘抽奖概率可任意调
转盘抽奖,炫丽的一般是flash做的.不懂flash而又不需要那么炫丽,可以简单的通过jquery来实现.网上教程有很多,跟着做了一下,也贴出来吧.要实现转盘抽奖,有两个关键点,一是让转盘或指针转起来 ...
使用 CSS3 实现转盘抽奖效果
微信和大型商场常常会有转盘抽奖的活动,比如上海移动和教授的抽取积分活动等.我们可以通过CSS3的transform属性来实现转盘的旋转.同时,transition属性实现过渡动画,它具有四个子属性,依 ...
python转盘抽奖_python实现大转盘抽奖效果
本文实例为大家分享了python实现大转盘抽奖的具体代码,供大家参考,具体内容如下选择转盘中的某一个方框,来进行抽奖 import tkinter #导入线程模块 import threading ...
jQuery翻牌子抽奖效果（已知结果）
描述:在八个紫色背景中随机点击一个,将抽中的礼物插入数组(另外七个礼物)中, 点击的位置翻转,展示礼物, 1s后其他七个翻转,剩余的七个礼物会按顺序填满其他七个位置 (样式参考来源:https://w ...
Unity实现大转盘抽奖效果（可存储数据）
一.演示效果二.使用工具 Unity:2019.4.36 VS:2019 三.场景搭建 1.总体预览 2.Scroll View设置 3.创建一个名叫StreamingAssets文件夹,在里面创建 ...

jQuery实现转盘抽奖效果

jQuery实现转盘抽奖效果相关推荐

最新文章

热门文章