抽奖活动软件 html,webAPP最常用的活动促销案例：大转盘H5抽奖特效

今天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

$(function (){

var jiang=["神秘大奖","魅力奖6元","可爱奖2元","加油奖1元","加油奖1元","魅力奖8元","可爱奖3元","加油奖1元"];

var jianginfo=["你是最有魅力的管家，每个顾客都爱你！","你是最可爱的员工，面对顾客要保持微笑哦！"," 加油！加油！努力多招募会员！","您是本月最幸运的五星管家！
盛时网将会给你安排一份特别惊喜！"];

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('

'+txt+'

'+info+'

立即领奖

');

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抽奖特效有一定的了解和学习。