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