VUE创建的带跑马灯动画的九宫格抽奖

所属分类: 网页特效-抽奖&游戏    2024-02-23 10:45:16

VUE创建的带跑马灯动画的九宫格抽奖 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

VUE创建的带跑马灯动画的九宫格抽奖(共9个文件)

    • index.html

使用方法

new Vue({el:"#app",data:{isStart:1,score:10,list:[{img:'img/j1.png',title:'谢谢参与'},{img:'img/j2.png',title:'美女一个'},{img:'img/j1.png',title:'宝马一辆'},{img:'img/j2.png',title:'单车一辆'},{img:'img/j1.png',title:'鸡蛋一蓝'},{img:'img/j2.png',title:'500红包'},{img:'img/j1.png',title:'靓号一个'},{img:'img/j2.png',title:'鲜花一蓝'}],index:-1,count:8,timer:0,speed:200,times:0,cycle:50,prize:-1,click:true,showToast:false,},mounted(){},methods:{startLottery(){if(!this.click){return}
this.startRoll();},startRoll(){this.times+=1
this.oneRoll()
if(this.times>this.cycle+10&&this.prize===this.index){clearTimeout(this.timer)
this.prize=-1
this.times=0
this.speed=200
this.click=true;var that=this;setTimeout(res=>{that.showToast=true;},500)}else{if(this.times7){this.prize=7}}else if(this.times>this.cycle+10&&((this.prize===0&&this.index===7)||this.prize===this.index+1)){this.speed+=110}else{this.speed+=20}
if(this.speed<40){this.speed=40} this.timer=setTimeout(this.startRoll,this.speed)}},oneRoll(){let index=this.index const count=this.count index+=1 if(index>count-1){index=0}
this.index=index},}})

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 抽奖&游戏

原生js圣诞老人过悬崖游戏源码

一款html5响应式圣诞老人过悬崖的游戏代码,任何地方按住不懂显示柱子,放手后可架桥。
  抽奖&游戏
 3359  0

jquery红色喜庆h5大转盘抽奖抽红包特效

页面有三个部分,抽奖模块、有谁在抢、活动说明,可用于做单页活动宣传。
  抽奖&游戏
 4268  0

CSS3剪辑路径猜猜我是谁特效代码

一款猜猜我是谁游戏特效,通过css剪辑一张图片当中人物眼部位置图片,鼠标悬停会更改剪辑路径,显示人物完整图像。
  抽奖&游戏
 5106  0

jquery虚拟掷骰子3D翻转动画特效代码

一个动画虚拟掷骰子特效,点击按钮触发掷骰子3D动画效果,随机从1到6显示,带动感mp3音效。
  抽奖&游戏
 5379  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论