前沿

最近公司有一个活动，让做一个老虎机抽奖活动，对于之前没有做过的我来说还是有些吃力的，于是就开始各种网上找插件，发现大部分都是jquery的，要不就是好多一部分的，一个完整的流程都走不下来，更有甚者让花钱买他的代码，我就想说大家都是分享，互相交流，你们怎么就那么自私，所以今天把我折腾的老虎机分享出来，以来方便自己以后开发，而来大家也可以发现不足，指出来共同进步。

该项目需要雪碧图哦

来先看看效果图

代码里边都有注释，比较容易上手。我用的是曲线救国的方法，就是说并不完美，不太灵活，雪碧图的位置一旦确定，就尽量不要动了，不然下次还需要在重新调雪碧图的y轴的位置，这个很烦，希望看见的小伙伴给个建议。

作者最近一段时间比较忙，还未将该效果抽出公共组件，后期有机会抽成公共组件，就好了。会省好多事。

好了不说废话了，上思路，代码。

思路逻辑：老虎机抽奖结果以后台告知为准，所以前台需要根据后台返回的是否抽中标示来展示相应的效果

其实我刚开始认为抽奖结果是前端做的，然后越陷越深，发现不好做出来，而且安全性不高，然后跟小伙伴交流才知道一般抽奖类的活动抽奖结果都是由后台告知，这下就轻松多了，因为你只需要根据结果展示相应的效果就好了。

主要运用的技术

老虎机抽奖活动运用到了css3的transition和css3的过渡来实现平滑滚动的效果，通过改变背景雪碧图的y轴位置backgroundPositionY来展示不同的奖品，以达到抽奖效果。js通过定时器可以达到转动效果
#第一步，布局

<template><div id="slotMachine"><div class="PosRela priceCenter HomeBGColor Width100"><img class="Width100 Height100" src="../img/2@2x.png"><!-- 老虎机抽奖框 --><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><!-- 前往抽奖区参与活动赢好礼！ --><!-- 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">前往抽奖区参与活动赢好礼！</div></div></DrawToast><!-- 获得福利券弹窗 --><DrawToast v-show='isGetWelfare' @fromChild="GetWelfare"><div class="PosRela GetWelfare" slot="luckyDrawCenter"><img class="Width100 Height100" src="../img/弹窗-点击抽奖@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">奖品已发放，您可在个人中心查看！</div><div class="PosAbso Width100  FontWeight  commonButton CheckNow"><img class="Height100" src="../img/按钮-立即抽奖@2x (1).png"><div class="PosAbso Width100 Height100 Font18 ColorWhite FontWeight">立即查看</div></div></div></DrawToast></div>
</template>
<style lang="less" scoped>
//这是项目公共的css，在本项目中用到的rem是2倍算法，所以要从你的设计图尺寸乘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);}}
}//弹窗内公共弹窗样式
.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, //前往抽奖区参与活动赢好礼！isGetWelfare: false, //获得福利券弹窗priceOne: 8.1, //控制滚动图的位置，显示那个奖品在中间的位置（需要雪碧图)priceTwo: 35.44,   //也就是背景雪碧图的y轴的位置priceThr: 53.02,textone: 0, //抽中某个奖品第一列的展示的图片，下边俩以此类推texttwo: 0,textthe: 0,}},mounted() {},watch: {//通过监听第三列的图的y轴的位置判断中的什么奖，展示该奖的名字priceThr(newValue, olderValue) {const that = this;switch (newValue) {case 1181.2:   //这个模拟的中奖的情况，所以弹出中奖弹层setTimeout(() => {//控制中奖弹层是否弹出that.isGetWelfare = true;}, 500);break;case 1276.88:   //这个位置未中奖  所以弹出很抱歉setTimeout(() => {that.isGoToPrice = true;}, 500);break;}}},methods: {//开始抽奖beganDraw() {console.log(this.LuckyDraw);if (this.LuckyDraw > 0) {//此处需要调接口，从接口里获取是否中奖，然后改变number的值，这样就可以在this.showPrize(number);方法中设置雪碧图的详细位置let number = 7;this.showPrize(number);//该方法是通过定时器来控制雪碧图的位置，以达到转动的效果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);},// 根据抽奖信息判断抽中的奖品showPrize(num) {console.log(num);const that = this;switch (num) {case 1: // 抽中每个奖项的展示图（也就是雪碧图的y轴的位置），需要单独设置that.textone = 1091;that.texttwo = 1091;that.textthe = 1091;break;case 2: that.textone = 1112;   //这里的数值都可以设置成变量，方便控制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:  //若有未中奖情况单独设置一个或多个未中奖的展示图（也就是雪碧图的y轴的位置）that.textone = 1210.5;that.texttwo = 1253.43;that.textthe = 1276.88;break;}},}
};
</script>

vue-版的老虎机抽奖活动效果折腾小记相关推荐

Vue版支付密码（类似支付宝）
支付密码 Vue版支付密码代码效果展示 HTML Javascript CSS Vue版支付密码代码效果展示 HTML <div class="spend-pay-1"& ...
vue高仿立体卡片效果（第二版）
组件如图所示: 下载地址:TAB组件在此基础修改:vue高仿立体卡片效果(第一版) 更新记录: 1.0 修复中间分割线ios端异常,放弃border-image采用after伪元素实现
vue高仿立体卡片效果（第三版）
组件如图所示: 使用方法 <template><div class="Home w100 h100"> ...
jquery 背景特效实现_html5实现的仿网页版微信聊天界面效果源码
码农那点事儿关注我们,一起学习进步这是一款基于html5实现的仿网页版微信聊天界面效果源码,可实现微信网页版聊天界面效果,在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上.整 ...
Echart + 百度地图实现区域聚合（Vue版）
Echart + 百度地图实现区域聚合(Vue版) 百度地图的聚合很简单,但是根据区域聚合怎么实现呢?结合Echart的百度地图怎么实现区域聚合呢? 单独玩过Echart,也单独用过百度地图,但是两个 ...
小新air14 plus 锐龙版R7 5800U睡眠功能折腾记录
小新air14 plus 锐龙版R7 5800U睡眠功能折腾记录 11月3号拿到电脑后,体验了几天win11,发现了几个问题: vpn软件会报莫名其妙的错误打开虚拟机,电脑立马蓝屏睡眠状态放到包里 ...
vue高仿立体卡片效果（第一版）
如图所示: 代码如下:(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html> <head><meta charset=&qu ...
前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
vue实现数字“滚动式增加”效果【插件化封装】
vue实现数字"滚动式增加"效果 [页面加载后,获取API返回的data后,即执行渲染动画(如下图gif动画)] 源码来自于转载 demo演示地址 https://www.17su ...
Vue版todolist案例
Vue版todolist案例 todolist – 记录你的待办事项 <!DOCTYPE html> <html><head><meta charset=&q ...

vue-版的老虎机抽奖活动效果折腾小记

前沿

该项目需要雪碧图哦

来先看看效果图

代码里边都有注释，比较容易上手。我用的是曲线救国的方法，就是说并不完美，不太灵活，雪碧图的位置一旦确定，就尽量不要动了，不然下次还需要在重新调雪碧图的y轴的位置，这个很烦，希望看见的小伙伴给个建议。

作者最近一段时间比较忙，还未将该效果抽出公共组件，后期有机会抽成公共组件，就好了。会省好多事。

好了不说废话了，上思路，代码。

主要运用的技术

第二步：逻辑

vue-版的老虎机抽奖活动效果折腾小记相关推荐

最新文章

热门文章