- 6309
-
-
-
-
-
今天25学堂跟大家分享一个移动H5开发当中，最常用的一个H5效果。那就是幸运大转盘抽奖特效。
当然，网上有很多类似的大转盘H5抽奖源码的分享和设计效果图展示。
25学堂分享的目的是告诉大家如何去修改先有的H5特效源码为我们的H5项目所用。
H5项目的名称是：幸运大转盘抽奖
使用教程非常的简单，点击中间的 开始抽奖，旋转几圈之后，后弹出中奖信息。如下图：
以及中奖名单的随时滚动展示：
整个幸运大转盘H5抽奖游戏的实现原理如下：
幸运大转盘抽奖是一款基于jQuery实现的转盘抽奖代码，点击开始抽奖随机产生一等奖、谢谢参与、要加油哦、三等奖、运气先攒着、再接再厉、二等奖、祝你好运、不要灰心等奖品选项。
使用说明：
转盘的角度取决于图片，转盘的业务决定代码复杂度，望各位根据实际情况开发。大转盘原理:随机出一个数字，通过后台算出在那个概率区间返回指定跳转的角度。
例：一等奖，概率1%，如果在1-100随机出100则跳转一等奖的角度范围内；
二等奖，概率2%，如果在1-100随机出99-98则跳转二等奖的角度范围内；
三等奖，概率97%，如果在1-100随机出97-1则跳转三等奖的角度范围内。
下面我们就来看下核心源码的解析：
大转盘H5抽奖jquery 插件是awardRotate.js
| <scripttype="text/javascript"src="js/jquery1.8.3.min.js></script> |
| <script type="text/javascript" src="js/awardRotate.js"></script> |
| $(function (){ |
| var jiang=["神秘大奖","魅力奖6元","可爱奖2元","加油奖1元","加油奖1元","魅力奖8元","可爱奖3元","加油奖1元"]; |
| var jianginfo=["你是最有魅力的管家，每个顾客都爱你！","你是最可爱的员工，面对顾客要保持微笑哦！"," 加油！加油！努力多招募会员！","您是本月最幸运的五星管家！<br/>盛时网将会给你安排一份特别惊喜！"]; |
| var rotateTimeOut = function (){ |
| $('#rotate').rotate({ |
| angle:0, |
| animateTo:2160, |
| duration:5000, |
| callback:function (){ |
| alert('网络超时，请检查您的网络设置！'); |
| } |
| }); |
| }; |
| var bRotate = false; |
| var rotateFn = function (awards,angles,txt,info){ |
| bRotate = !bRotate; |
| $('#rotate').stopRotate(); |
| $('#rotate').rotate({ |
| angle:0, |
| animateTo:angles+2228, |
| duration:5000, |
| callback:function (){ |
| $("#jiangceng").show().find('div').html('<h2>'+txt+'</h2><p>'+info+'</p><a href="result.html?awards='+awards+'"><div>立即领奖</div></a>'); |
| bRotate = !bRotate; |
| } |
| }) |
| }; |
| $('.dianbtn').on("click",function (){ |
| choujiang(); |
| }); |
| function choujiang(){ |
| var items=Math.ceil(Math.random()*8); |
| //alert(items); |
| //var items=8; |
| switch (items) { |
| case 1: |
| rotateFn(1, 270, jiang[1],jianginfo[0]); |
| break; |
| case 2: |
| rotateFn(2, 45, jiang[2],jianginfo[1]); |
| break; |
| case 3: |
| rotateFn(3, 90, jiang[3],jianginfo[2]); |
| break; |
| case 4: |
| rotateFn(4, 315, jiang[0],jianginfo[3]); |
| break; |
| case 5: |
| rotateFn(5, 180, jiang[6],jianginfo[1]); |
| break; |
| case 6: |
| rotateFn(6, 225, jiang[7],jianginfo[2]); |
| break; |
| case 7: |
| rotateFn(7, 135, jiang[5],jianginfo[0]); |
| break; |
| case 8: |
| rotateFn(8, 0, jiang[4],jianginfo[2]); |
| break; |
| } |
| } |
网上有很多关于大转盘H5抽奖特效源码的下载，
比如：http://www.jb51.net/jiaoben/339993.html
希望看到学堂君分享的代码，对大转盘H5抽奖特效有一定的了解和学习。
之前，25学堂分享了webapp开发优秀插件推荐：刮刮乐H5抽奖特效和APP活动专题设计欣赏和APP活动设计规范
每天更新，
全站高品质素材免费下载！
全站高品质素材免费下载！
