热门分类： |
支持手机端jQuery幸运大转盘抽奖JS代码特效
文章来源：原创 作者:JS代码网 时间: 访问: 下载次数：
很不错的手机幸运页面，响应式设计，经常用在微信里面进行营销活动，界面非常精致，只要
配合PHP后端抽奖逻辑可以了，页面抽奖逻辑说明,HTML页面里面怎么调用都有JS代码，直接把里面的PHP文
件改成你的抽奖逻辑即可。
分享给朋友：jQuery幸运大转盘_jQuery+PHP抽奖程序 - ThinkPHP框架
网上转盘抽奖程序大多是flash完成的，而本文使用jQuery和PHP来实现转盘抽奖程序。
若是想看更多js特效、网站源码、 js教程请访问 /js 还有演示DEMO，最主要是可以免费下载。首先要准备两张图片，即圆盘和指针，然后我们在#disk来放置圆盘背景图片，在css中控制，用#start来放置指针图片start.png。
&div&id=&disk&&&/div&&
&div&id=&start&&&img&src=&images/start.png&&id=&startbtn&&alt=&转盘开启&/&&/div&
CSS指针和圆盘样式如下：
#disk{width:417&height:417&background:url(images/disk.jpg)&no-repeat}&&
#start{width:163&height:320&position:&top:46&left:130}&&
#start&img{cursor:pointer}
接着我们引入jquery.js、旋转插件jQueryRotate.2.2.js及动画easing插件jquery.easing.min.js。easing&教程我们已经讲过了，jQuery&Easing动画插件。
&script&type&=&&text/javascript&&src&=&&jquery.js&&&&&/script&&
&script&type&=&&text/javascript&&src&=&&jQueryRotate.2.2.js&&&/script&&
&script&type&=&&text/javascript&&src&=&&jquery.easing.min.js&&&/script&
最后通过jQueryRotate.js旋转插件，我们让指针转起来。
$(function()&{&
&&&&$(&#startbtn&).rotate({&
&&&&&&&&bind:&{&
&&&&&&&&&&&&click:&function()&{&
&&&&&&&&&&&&&&&&var&random&=&Math.floor(Math.random()&*&360);&//生成随机数&&
&&&&&&&&&&&&&&&&$(this).rotate({&
&&&&&&&&&&&&&&&&&&&&duration:&3000,&
&&&&&&&&&&&&&&&&&&&&//转动时间间隔（速度单位ms）&&
&&&&&&&&&&&&&&&&&&&&angle:&0,&
&&&&&&&&&&&&&&&&&&&&//指针开始角度&&
&&&&&&&&&&&&&&&&&&&&animateTo:&3600&+&random,&
&&&&&&&&&&&&&&&&&&&&//转动角度，当转动角度到达3600+random度时停止转动。&
&&&&&&&&&&&&&&&&&&&&easing:&$.easing.easeOutSine,&
&&&&&&&&&&&&&&&&&&&&//easing动画效果&
&&&&&&&&&&&&&&&&&&&&callback:&function()&{&//回调函数&&
&&&&&&&&&&&&&&&&&&&&&&&&alert('恭喜您，中奖了！');&
&&&&&&&&&&&&&&&&&&&&}&
&&&&&&&&&&&&&&&&});&
&&&&&&&&&&&&}&
&&&&&&&&}&
下面介绍使用PHP来控制抽奖几率，以及完成两者之间的交互：
首先，在ajax.php中创建一个奖项对应角度和中奖几率二维数组：
$prize_arr&=&array(&
&&&&'0'&=&&array('id'&=&&1,&'min'&=&&1,&'max'&=&&29,&'prize'&=&&'一等奖',&'v'&=&&1),&
&&&&'1'&=&&array('id'&=&&2,&'min'&=&&302,&'max'&=&&328,&'prize'&=&&'二等奖',&'v'&=&&2),&
&&&&'2'&=&&array('id'&=&&3,&'min'&=&&242,&'max'&=&&268,&'prize'&=&&'三等奖',&'v'&=&&5),&
&&&&'3'&=&&array('id'&=&&4,&'min'&=&&182,&'max'&=&&208,&'prize'&=&&'四等奖',&'v'&=&&7),&
&&&&'4'&=&&array('id'&=&&5,&'min'&=&&122,&'max'&=&&148,&'prize'&=&&'五等奖',&'v'&=&&10),&
&&&&'5'&=&&array('id'&=&&6,&'min'&=&&62,&'max'&=&&88,&'prize'&=&&'六等奖',&'v'&=&&25),&
&&&&'6'&=&&array('id'&=&&7,&'min'&=&&array(32,&92,&152,&212,&272,&332),&
&&&&&&&&'max'&=&&array(58,&118,&178,&238,&298,&358),&'prize'&=&&'七等奖',&'v'&=&&50)&
&&&&//min数组表示每个个奖项对应的最小角度&max表示最大角度&
&&&&//prize表示奖项内容，v表示中奖几率(若数组中七个奖项的v的总和为100，如果v的值为1，则代表中奖几率为1%，依此类推)&
中奖概率方法我们之前在jQuery砸金蛋_PHP砸金蛋讲过，代码如下
function&getRand($proArr)&{&
&&&&$data&=&'';&
&&&&$proSum&=&array_sum($proArr);&//概率数组的总概率精度&&
&&&&foreach&($proArr&as&$k&=&&$v)&{&//概率数组循环&
&&&&&&&&$randNum&=&mt_rand(1,&$proSum);&
&&&&&&&&if&($randNum&&=&$v)&{&
&&&&&&&&&&&&$data&=&$k;&
&&&&&&&&&&&&&
&&&&&&&&}&else&{&
&&&&&&&&&&&&$proSum&-=&$v;&
&&&&&&&&}&
&&&&unset($proArr);&
&&&&return&$&
函数getRand()会根据数组中设置的几率计算出符合条件的id，我们可以接着调用getRand()。
foreach&($prize_arr&as&$v)&{&
&&&&$arr[$v['id']]&=&$v['v'];&
$prize_id&=&getRand($arr);&//根据概率获取奖项id&&
$res&=&$prize_arr[$prize_id&-&1];&//中奖项&&
$min&=&$res['min'];&
$max&=&$res['max'];&
if&($res['id']&==&7)&{&//七等奖&&
&&&&$i&=&mt_rand(0,&5);&
&&&&$data['angle']&=&mt_rand($min[$i],&$max[$i]);&
&&&&$data['angle']&=&mt_rand($min,&$max);&//随机生成一个角度&&
$data['prize']&=&$res['prize'];&
echo&json_encode($data);
接着点击”开始抽奖“按钮，便会向后台ajax.php请求并返回奖项信息，这时指针开始转动，指针最终停留位置是由ajax.php返回值angle&来决定的，这样我们就可以控制概率和前端指针转动停留位置。代码如下：
$(function()&{&
&&&&$(&#startbtn&).click(function()&{&
&&&&&&&&lottery();&
function&lottery()&{&
&&&&$.ajax({&
&&&&&&&&type:&'POST',&
&&&&&&&&url:&'ajax.php',&
&&&&&&&&dataType:&'json',&
&&&&&&&&cache:&false,&
&&&&&&&&error:&function()&{&
&&&&&&&&&&&&alert('Sorry，出错了！');&
&&&&&&&&&&&&return&&
&&&&&&&&},&
&&&&&&&&success:&function(json)&{&
&&&&&&&&&&&&$(&#startbtn&).unbind('click').css(&cursor&,&&default&);&
&&&&&&&&&&&&var&angle&=&json.&//指针角度&&
&&&&&&&&&&&&var&prize&=&json.&//中奖奖项标题&&
&&&&&&&&&&&&$(&#startbtn&).rotate({&
&&&&&&&&&&&&&&&&duration:&3000,//转动时间&ms&
&&&&&&&&&&&&&&&&angle:&0,&//从0度开始&
&&&&&&&&&&&&&&&&animateTo:&3600&+&angle,//转动角度&&
&&&&&&&&&&&&&&&&easing:&$.easing.easeOutSine,&//easing扩展动画效果&
&&&&&&&&&&&&&&&&callback:&function()&{&
&&&&&&&&&&&&&&&&&&&&var&resulte&=&confirm('恭喜您中得'&+&prize&+&'\n想要继续吗？');&
&&&&&&&&&&&&&&&&&&&&if&(resulte)&{&//若是点击确定，继续抽奖&
&&&&&&&&&&&&&&&&&&&&&&&&lottery();&
&&&&&&&&&&&&&&&&&&&&}&
&&&&&&&&&&&&&&&&}&
&&&&&&&&&&&&});&
&&&&&&&&}&
}查看该特效演示及免费下载，请访问
积分：6270
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。&幸运大转盘抽奖， iPhone 7 Plus、超值金条任性送! 100%中奖
幸运大转盘抽奖， iPhone 7 Plus、超值金条任性送! 100%中奖
日09时13分来源：
元旦节已离我们远去，
新春佳节还远吗？
每逢佳节倍思亲，
就是我们这些异乡游子节日假期的心情。
过节也称为过劫，
高兴之余也让我们为自己扁扁的荷包感到尴尬。
俗话说，经济基础决定上层建筑，
如果没钱，退步难行，
更别说什么诗情画意，美酒佳肴了，
所以，我们今天不谈情，只给你送钱。
e融所周年庆大转盘抽奖，
日-日活动期间，
投资平台车e贷理财产品，
单笔投资金额达到一定额度后即可参与抽大奖。
投得越多，抽奖次数越多哦！
奖品~~iPhone 7 Plus、10g金条、京东购物卡、话费、现金任性送!
活动这么给力，那e融所是一家怎样的平台？
下面小编就为你详细介绍一下e融所，一家由上市系券商背景+银行高管实力打造的互联网投融资理财平台。e融所简介——上市系+银行存管系投融资服务平台
实力雄厚：上市公司+银行高管实力打造
银行存管：携手江西银行开展资金存管
行业认证：广东互联网金融协会会员单位
荣誉资质：星火互联网金融研究院AAA评级强势股东介绍（部分）
方大集团：高新技术上市公司，A股代码000055、B股代码200055。
国人通信：中国通信设备制造10强企业、深圳第一家纳斯达克上市企业。
华林创投：华林证券旗下成立的专业从事直接股权投资业务的全资子公司。多重安全保障
第一重：上市公司背景，实力雄厚
第二重：银行资金存管，合规经营
第三重：太乙大数据风控，项目优选
第四重：电子合同保全，保障合同真实完整有效新手享四重壕礼
第1重：新手注册e融所送110元红包；
第2重：开通江西银行存管账户送50元红包；
第3重：首次投资最高送100元红包；
第4重：新人首投享预期15%年化收益。
日日相惜，夜夜相对，
节日一到，总想给你送点啥？
唯有财富的支撑，
才能给你们幸福的依靠。
连续一个月，
e融所幸运大转盘摇不停，
让你赚得盆满钵满。
感恩周年庆，与你相伴！还可点击 “阅读原文”参与幸运大转盘抽奖，赢壕礼！iOS / iPhone / iPad 幸运大转盘抽奖Demo 代码 转盘抽奖 动画（Animation）开源代码 -
已有 125 人收藏
&&&&转盘抽奖Demo。真实效果比Gif截图好很多，可以观看视频效果。
&&&&小编注：这份转盘抽奖demo只是利用了另外一份代码的图片，代码不一样，抽奖的动画效果也不一样。感谢开发者@ 发布代码于。
测试环境：
&&[Code4App]编译测试
相关代码：
（14794次查看，3521次下载）
（10892次查看，2510次下载）
（18224次查看，5439次下载）
（18521次查看，3675次下载）
（26357次查看，23707次下载）
（17253次查看，4231次下载）
代码评论：
登录后方可评论
-控件分类-
-功能分类-1.编辑幸运大转盘活动开始内容
关键词：创建活动第一步就是添加关键词，每个活动关键词不一样，用户对公众号输入这个关键词才会出来这个活动
活动名称：本项活动的名称
兑奖信息：本消息只有客户中奖了才会出现的兑奖说明，可以添加例如：兑奖请联系我们，电话138********
中奖提示：本消息也是只有中奖了才会出现，客户中奖后的一个提示例如：亲，您中奖了
活动时间：活动时间可以直接选择
活动说明：本项内容里面可以添加本次活动的说明
重复抽奖回复：如果设置只允许抽一次奖的，请写：你已经玩过了，下次再来.如果设置可多次抽奖，请写：亲，继续努力哦！
2.编辑幸运大转盘活动结束内容
活动结束公告主题：活动结束后展示的页面
活动结束说明：若活动结束，商家给粉丝的提示语
手机端显示如下：
3.奖项设置
奖品设置和数量添加
预计活动的人数：预估活动人数直接影响抽奖概率：中奖概率 = 奖品总数/(预估活动人数*每人抽奖次数) 如果要确保任何时候都100%中奖建议设置为1人参加!如果要确保任何时候都100%中奖建议设置为1人参加!并且奖项只设置一等奖.
每人最多允许抽奖次数：必须1-5之间的数字（很多商家希望粉丝每天都可以抽一次奖，这个每个人最多允许抽奖的次数可以在源码里面修改）
每天最多抽奖次数：必须小于总抽奖次数！ 0 为不限制 抽完总数就不能抽了! 可以抽奖天数 = 总数/每天抽奖次数
兑奖密码：兑奖密码由商家来输入的，当客户进入实体店铺进行线下兑奖的时候，可以出示手机信息，商家输入密码即可验证兑奖
SN码重命名为：例如CND码,充值密码,SN码 这个主意用于修改SN码的名称，不懂请不要修改
手机号重命名：例如QQ号,微信号,手机号等其他联系方式，不懂请不要修改
抽奖页面是否显示奖品数量：可以设置为显示或者不显示
注册后才能参与：商家在后台添加活动的时候，可以控制粉丝在参与活动前是否需要先完善个人信息。如果在添加活动的时候选择了必须先完善个人资料，那么在打开大转盘等活动的时候就会自动提示粉丝先填写个人资料。
完成以上操作点击保存就表示您已经创建好一个大转盘活动啦！！