webAPP最常用的活動(dòng)促銷案例：大轉(zhuǎn)盤H5抽獎(jiǎng)特效

今天25學(xué)堂跟大家分享一個(gè)移動(dòng)H5開發(fā)當(dāng)中，最常用的一個(gè)H5效果。那就是幸運(yùn)大轉(zhuǎn)盤抽獎(jiǎng)特效。

當(dāng)然，網(wǎng)上有很多類似的大轉(zhuǎn)盤H5抽獎(jiǎng)源碼的分享和設(shè)計(jì)效果圖展示。

25學(xué)堂分享的目的是告訴大家如何去修改先有的H5特效源碼為我們的H5項(xiàng)目所用。

 

H5項(xiàng)目的名稱是：幸運(yùn)大轉(zhuǎn)盤抽獎(jiǎng)

幸運(yùn)大轉(zhuǎn)盤H5設(shè)計(jì)圖

使用教程非常的簡單，點(diǎn)擊中間的 開始抽獎(jiǎng)，旋轉(zhuǎn)幾圈之后，后彈出中獎(jiǎng)信息。如下圖：

中獎(jiǎng)紅包展示H5效果圖

 

以及中獎(jiǎng)名單的隨時(shí)滾動(dòng)展示：

中獎(jiǎng)名單的滾動(dòng)

整個(gè)幸運(yùn)大轉(zhuǎn)盤H5抽獎(jiǎng)游戲的實(shí)現(xiàn)原理如下：

幸運(yùn)大轉(zhuǎn)盤抽獎(jiǎng)是一款基于jQuery實(shí)現(xiàn)的轉(zhuǎn)盤抽獎(jiǎng)代碼，點(diǎn)擊開始抽獎(jiǎng)隨機(jī)產(chǎn)生一等獎(jiǎng)、謝謝參與、要加油哦、三等獎(jiǎng)、運(yùn)氣先攢著、再接再厲、二等獎(jiǎng)、祝你好運(yùn)、不要灰心等獎(jiǎng)品選項(xiàng)。

使用說明：

轉(zhuǎn)盤的角度取決于圖片，轉(zhuǎn)盤的業(yè)務(wù)決定代碼復(fù)雜度，望各位根據(jù)實(shí)際情況開發(fā)。大轉(zhuǎn)盤原理:隨機(jī)出一個(gè)數(shù)字，通過后臺(tái)算出在那個(gè)概率區(qū)間返回指定跳轉(zhuǎn)的角度。

例：一等獎(jiǎng)，概率1%，如果在1-100隨機(jī)出100則跳轉(zhuǎn)一等獎(jiǎng)的角度范圍內(nèi)；

二等獎(jiǎng)，概率2%，如果在1-100隨機(jī)出99-98則跳轉(zhuǎn)二等獎(jiǎng)的角度范圍內(nèi)；

三等獎(jiǎng)，概率97%，如果在1-100隨機(jī)出97-1則跳轉(zhuǎn)三等獎(jiǎng)的角度范圍內(nèi)。

 

下面我們就來看下核心源碼的解析：

大轉(zhuǎn)盤H5抽獎(jiǎng)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=["神秘大獎(jiǎng)","魅力獎(jiǎng)6元","可愛獎(jiǎng)2元","加油獎(jiǎng)1元","加油獎(jiǎng)1元","魅力獎(jiǎng)8元","可愛獎(jiǎng)3元","加油獎(jiǎng)1元"];
var jianginfo=["你是最有魅力的管家，每個(gè)顧客都愛你！","你是最可愛的員工，面對顧客要保持微笑哦！"," 加油！加油！努力多招募會(huì)員！","您是本月最幸運(yùn)的五星管家！<br/>盛時(shí)網(wǎng)將會(huì)給你安排一份特別驚喜！"];
var rotateTimeOut = function (){
$('#rotate').rotate({
angle:0,
animateTo:2160,
duration:5000,
callback:function (){
alert('網(wǎng)絡(luò)超時(shí)，請檢查您的網(wǎng)絡(luò)設(shè)置！');
}
});
};
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>立即領(lǐng)獎(jiǎng)</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;


}
}

網(wǎng)上有很多關(guān)于大轉(zhuǎn)盤H5抽獎(jiǎng)特效源碼的下載，

比如：http://www.jb51.net/jiaoben/339993.html

希望看到學(xué)堂君分享的代碼，對大轉(zhuǎn)盤H5抽獎(jiǎng)特效有一定的了解和學(xué)習(xí)。

之前，25學(xué)堂分享了webapp開發(fā)優(yōu)秀插件推薦：刮刮樂H5抽獎(jiǎng)特效和APP活動(dòng)專題設(shè)計(jì)欣賞和APP活動(dòng)設(shè)計(jì)規(guī)范

 


每天更新，
全站高品質(zhì)素材免費(fèi)下載！