当前位置: 首页 >> HTML5+CSS3_HTML网站模板_DIV+CSS技术分享 >> 阅读正文

webAPP最常用的活动促销案例:大转盘H5抽奖特效

今天25学堂跟大家分享一个移动H5开发当中,最常用的一个H5效果。那就是幸运大转盘抽奖特效。

当然,网上有很多类似的大转盘H5抽奖源码的分享和设计效果图展示。

25学堂分享的目的是告诉大家如何去修改先有的H5特效源码为我们的H5项目所用。

 

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活动设计规范

 



无觅相关文章插件,快速提升流量

找专业的人,做专业的事 | 为您提供设计管家服务


本文标题:webAPP最常用的活动促销案例:大转盘H5抽奖特效

本文地址:http://www.25xt.com/html5css3/13176.html

本文关键词: , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。