前沿
最近公司有一個(gè)活動(dòng)祠饺,讓做一個(gè)老虎機(jī)抽獎(jiǎng)活動(dòng)粘咖,對(duì)于之前沒有做過的我來說還是有些吃力的邪锌,于是就開始各種網(wǎng)上找插件勉躺,發(fā)現(xiàn)大部分都是jquery的,要不就是好多一部分的觅丰,一個(gè)完整的流程都走不下來饵溅,更有甚者讓花錢買他的代碼,我就想說大家都是分享妇萄,互相交流蜕企,你們?cè)趺淳湍敲醋运剑越裉彀盐艺垓v的老虎機(jī)分享出來冠句,以來方便自己以后開發(fā)轻掩,而來大家也可以發(fā)現(xiàn)不足,指出來共同進(jìn)步懦底。
該項(xiàng)目需要雪碧圖哦
來先看看效果圖
代碼里邊都有注釋唇牧,比較容易上手。我用的是曲線救國(guó)的方法基茵,就是說并不完美奋构,不太靈活,雪碧圖的位置一旦確定拱层,就盡量不要?jiǎng)恿嗣志剩蝗幌麓芜€需要在重新調(diào)雪碧圖的y軸的位置,這個(gè)很煩根灯,希望看見的小伙伴給個(gè)建議径缅。
作者最近一段時(shí)間比較忙,還未將該效果抽出公共組件烙肺,后期有機(jī)會(huì)抽成公共組件纳猪,就好了。會(huì)省好多事桃笙。
好了不說廢話了氏堤,上思路,代碼搏明。
思路邏輯:老虎機(jī)抽獎(jiǎng)結(jié)果以后臺(tái)告知為準(zhǔn)鼠锈,所以前臺(tái)需要根據(jù)后臺(tái)返回的是否抽中標(biāo)示來展示相應(yīng)的效果
其實(shí)我剛開始認(rèn)為抽獎(jiǎng)結(jié)果是前端做的,然后越陷越深星著,發(fā)現(xiàn)不好做出來购笆,而且安全性不高,然后跟小伙伴交流才知道一般抽獎(jiǎng)?lì)惖幕顒?dòng)抽獎(jiǎng)結(jié)果都是由后臺(tái)告知虚循,這下就輕松多了同欠,因?yàn)槟阒恍枰鶕?jù)結(jié)果展示相應(yīng)的效果就好了样傍。
主要運(yùn)用的技術(shù)
老虎機(jī)抽獎(jiǎng)活動(dòng)運(yùn)用到了css3的transition和css3的過渡來實(shí)現(xiàn)平滑滾動(dòng)的效果,通過改變背景雪碧圖的y軸位置
backgroundPositionY
來展示不同的獎(jiǎng)品铺遂,以達(dá)到抽獎(jiǎng)效果衫哥。js通過定時(shí)器可以達(dá)到轉(zhuǎn)動(dòng)效果
第一步,布局
<template>
<div id="slotMachine">
<div class="PosRela priceCenter HomeBGColor Width100">
<img class="Width100 Height100" src="../img/2@2x.png">
<!-- 老虎機(jī)抽獎(jiǎng)框 -->
<div class="PosAbso trigerCenter">
<transition name="down-up-translate-fade">
<div class="SpriteChart" :style="{backgroundPositionY: priceOne + 'rem'}"></div>
</transition>
<transition name="down-up-translate-fade">
<div class="SpriteChart" :style="{backgroundPositionY: priceTwo + 'rem'}"></div>
</transition>
<transition name="down-up-translate-fade">
<div class="SpriteChart" :style="{backgroundPositionY: priceThr + 'rem'}"></div>
</transition>
</div>
</div>
<!-- 前往抽獎(jiǎng)區(qū)參與活動(dòng)贏好禮襟锐! -->
<!-- DrawToast 是封裝的公共彈窗組件 -->
<DrawToast v-show='isGoToPrice' @fromChild="GoToPrice">
<div class="PosRela GoToPrice" slot="luckyDrawCenter">
<img class="Width100 Height100" src="../img/彈窗@2x (1).png">
<div class="PosAbso Width100 Font17 FontWeight GoToPriceText">前往抽獎(jiǎng)區(qū)參與活動(dòng)贏好禮炕檩!</div>
</div>
</DrawToast>
<!-- 獲得福利券彈窗 -->
<DrawToast v-show='isGetWelfare' @fromChild="GetWelfare">
<div class="PosRela GetWelfare" slot="luckyDrawCenter">
<img class="Width100 Height100" src="../img/彈窗-點(diǎn)擊抽獎(jiǎng)@2x.png">
<div class="PosAbso Width100 Font20 FontWeight constrGet">恭喜您獲得</div>
<div class="PosAbso Width100 getVoucher">
<div class="getVoucherName Font24 FontWeight Ellipsis">0.8%福利券</div>
</div>
<div class="PosAbso Width100 Font14 PrizesIssued">獎(jiǎng)品已發(fā)放,您可在個(gè)人中心查看捌斧!</div>
<div class="PosAbso Width100 FontWeight commonButton CheckNow">
<img class="Height100" src="../img/按鈕-立即抽獎(jiǎng)@2x (1).png">
<div class="PosAbso Width100 Height100 Font18 ColorWhite FontWeight">立即查看</div>
</div>
</div>
</DrawToast>
</div>
</template>
<style lang="less" scoped>
//這是項(xiàng)目公共的css笛质,在本項(xiàng)目中用到的rem是2倍算法,所以要從你的設(shè)計(jì)圖尺寸乘2除以100得到捞蚂。
@import url('../../../components/tigerBaseCss/index');
.priceCenter {
height: 4.22rem;
border: 1px solid blue;
.trigerCenter {
border: 1px solid blue;
width: 5.5rem;
height: 3rem;
overflow: hidden;
left: 1rem;
top: 0.6rem;
border-radius: 0.1rem;
.SpriteChart {
width: 1.75rem;
border: 1px solid red;
height: 9.8rem;
background: url("../img/choujiangzuhe.png") center center repeat-y;
background-size: 100% 100%;
float: left;
margin-right: 0.1rem;
background-attachment: scroll;
&:nth-child(2) {}
&:nth-child(3) {
float: right;
margin: 0;
}
}
.down-up-translate-fade-enter-active,
.down-up-translate-fade-leave-active {
transition: all 0.1s;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
}
.down-up-translate-fade-enter,
.down-up-translate-fade-leave-active {
opacity: 1;
}
.down-up-translate-fade-enter {
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
}
.down-up-translate-fade-leave-active {
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
}
}
}
//彈窗內(nèi)公共彈窗樣式
.commonButton {
height: 0.9rem;
div {
top: 0;
left: 0;
line-height: 0.8rem;
}
}
.GoToPrice {
width: 5.48rem;
height: 5.58rem;
.GoToPriceText {
top: 4.2rem;
color: #DF2531;
}
}
.GetWelfare {
width: 5.6rem;
height: 5.5rem;
.constrGet {
color: #B46C38;
top: 1.02rem;
}
.getVoucher {
top: 2.22rem;
.getVoucherName {
width: 3rem;
margin: auto;
color: #E04D4B;
}
}
.PrizesIssued {
color: #B46C38;
top: 3rem;
}
.CheckNow {
top: 3.9rem;
}
}
</style>
第二步:邏輯
<script>
export default {
data() {
return {
isGoToPrice: false, //前往抽獎(jiǎng)區(qū)參與活動(dòng)贏好禮妇押!
isGetWelfare: false, //獲得福利券彈窗
priceOne: 8.1, //控制滾動(dòng)圖的位置,顯示那個(gè)獎(jiǎng)品在中間的位置(需要雪碧圖)
priceTwo: 35.44, //也就是背景雪碧圖的y軸的位置
priceThr: 53.02,
textone: 0, //抽中某個(gè)獎(jiǎng)品第一列的展示的圖片姓迅,下邊倆以此類推
texttwo: 0,
textthe: 0,
}
},
mounted() {
},
watch: {
//通過監(jiān)聽第三列的圖的y軸的位置判斷中的什么獎(jiǎng)敲霍,展示該獎(jiǎng)的名字
priceThr(newValue, olderValue) {
const that = this;
switch (newValue) {
case 1181.2: //這個(gè)模擬的中獎(jiǎng)的情況,所以彈出中獎(jiǎng)彈層
setTimeout(() => {
//控制中獎(jiǎng)彈層是否彈出
that.isGetWelfare = true;
}, 500);
break;
case 1276.88: //這個(gè)位置未中獎(jiǎng) 所以彈出很抱歉
setTimeout(() => {
that.isGoToPrice = true;
}, 500);
break;
}
}
},
methods: {
//開始抽獎(jiǎng)
beganDraw() {
console.log(this.LuckyDraw);
if (this.LuckyDraw > 0) {
//此處需要調(diào)接口丁存,從接口里獲取是否中獎(jiǎng)肩杈,然后改變number的值,這樣就可以在this.showPrize(number);方法中設(shè)置雪碧圖的詳細(xì)位置
let number = 7;
this.showPrize(number);
//該方法是通過定時(shí)器來控制雪碧圖的位置解寝,以達(dá)到轉(zhuǎn)動(dòng)的效果
this.startDraw();
}
},
startDraw() {
this.timeone(10);
setTimeout(() => {
this.timetwo(0);
}, 500);
setTimeout(() => {
this.timethe(0);
}, 1000);
},
timeone(num) {
var t = setInterval(() => {
if (num <= this.textone) {
num += 10;
this.priceOne = num;
} else {
clearInterval(t);
this.priceOne = this.textone;
}
}, 30);
},
timetwo(num) {
var t = setInterval(() => {
if (num <= this.texttwo) {
num += 10;
this.priceTwo = num;
} else {
clearInterval(t);
this.priceTwo = this.texttwo;
}
}, 30);
},
timethe(num) {
var t = setInterval(() => {
if (num <= this.textthe) {
num += 10;
this.priceThr = num;
} else {
clearInterval(t);
this.priceThr = this.textthe;
}
}, 30);
},
// 根據(jù)抽獎(jiǎng)信息判斷抽中的獎(jiǎng)品
showPrize(num) {
console.log(num);
const that = this;
switch (num) {
case 1: // 抽中每個(gè)獎(jiǎng)項(xiàng)的展示圖(也就是雪碧圖的y軸的位置)扩然,需要單獨(dú)設(shè)置
that.textone = 1091;
that.texttwo = 1091;
that.textthe = 1091;
break;
case 2:
that.textone = 1112; //這里的數(shù)值都可以設(shè)置成變量,方便控制
that.texttwo = 1112;
that.textthe = 1112;
break;
case 3:
that.textone = 1135;
that.texttwo = 1135;
that.textthe = 1135;
break;
case 4:
that.textone = 1158;
that.texttwo = 1158;
that.textthe = 1158;
break;
case 5:
that.textone = 1181.2;
that.texttwo = 1181.2;
that.textthe = 1181.2;
break;
case 6:
that.textone = 1203;
that.texttwo = 1203;
that.textthe = 1203;
break;
case 7: //若有未中獎(jiǎng)情況單獨(dú)設(shè)置一個(gè)或多個(gè)未中獎(jiǎng)的展示圖(也就是雪碧圖的y軸的位置)
that.textone = 1210.5;
that.texttwo = 1253.43;
that.textthe = 1276.88;
break;
}
},
}
};
</script>