<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="x5-orientation" content="portrait">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/if_heng.js"></script>
<script type="text/javascript" src="js/font-size.js"></script>
</head>
<body >
<div class="box-size" id="app" :style="{backgroundImage:'url('+a_bg+')'}">
<p class="top"><img :src=a_top></p>
<div class="zhuanpan-div">
<img :src=a_zhuanpan_bg>
<div class="zhuanpan" id="rotate">
<img :src=a_zhuanpan >
<!--<li v-for="gift in gifts" ><span >{{gift.pic}}</span></li>-->
<my-component :gift = 'gifts'></my-component>
</div>
<button type="button" @click="start()" class="btn start-btn"><img :src=a_start></button>
</div>
<div class="bottom">
<img :src=a_bottom>
<button class="btn rule-btn" @click="t_type='rule',if_tc = true"></button>
<button class="btn gift-btn" @click="t_type='my',if_tc = true"></button>
<button class="btn jilu-btn">中奖记录</button>
</div>
<div class="tanchuang" v-if="if_tc" >
<div class=" back-bg" @click="if_tc = false"></div>
<transition name="fade">
<div v-if="t_type == 'my'" class="gift-show">
<img :src=a_my width="100%">
<ul>
<li></li>
</ul>
<button class="btn close" @click="if_tc = false"></button>
</div>
<div v-else-if="t_type == 'rule'" class="rule-show" >
<img :src=a_rule width="100%">
<button class="btn close" @click="if_tc = false"></button>
</div>
<div v-else-if="t_type == 'gift'" class="rule-show">
<img :src=a_gift width="100%">
<div class="gift-mess">
<p><img :src="result_gift_pic"></p>
<p>{{result_gift_name}}</p>
</div>
<button class="btn use-btn"></button>
</div>
</transition>
</div>
</div>
<script type="text/x-template" id="my-component" >
<ul>
<template v-for="item in gift" >
<li :style="{transform:'rotate('+item.angles+'deg)'}"><span :style="{backgroundImage:'url(images/'+item.pic+'.png)'}"></span></li>
</template>
</ul>
</script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>
<script>
Vue.component('my-component', {
template: '#my-component',
props: {
gift: Array,
},
});
var vue = new Vue({
el:"#app",
data:{
if_tc:false, //弹窗是否显示
t_type: "", //弹窗类型
gifts:[
{
pic:'gift1',
name:'100M',
angles:''
},
{
pic:'gift2',
name:'200M',
angles:''
},
{
pic:'gift3',
name:'300M',
angles:''
},{
pic:'gift4',
name:'400M',
angles:''
},
{
pic:'gift5',
name:'500M',
angles:''
},{
pic:'gift6',
name:'600M',
angles:''
},
{
pic:'gift7',
name:'700M',
angles:''
},
{
pic:'gift8',
name:'800M',
angles:''
}
], //奖品
result_gift_name:'', //中奖奖品名
result_gift_pic:'', //中奖奖品图片
a_bg:'images/bg.jpg', //背景
a_top:'images/top.png', //顶部图
a_zhuanpan_bg:'images/zhuanpan-bg.png',//转盘背景
a_zhuanpan:'images/zhuanpan.png',//转盘图
a_start:'images/start-btn.png',//开始按钮
a_bottom:'images/bottom.png',//底部图
a_rule:'images/rule-show.png',//活动规则图
a_my:'images/my.png',//我的奖品图
a_gift:'images/gift-bg.png' //奖品弹窗
},
mounted:function () {
this.fangxiang();
},
computed:{
},
methods:{
fangxiang:function () {
var vm = this,
gift_l = vm.gifts.length,
every_angle = Math.floor(360/gift_l);
for(var i = 0;i<gift_l;i++){
vm.gifts[i].angles = every_angle/2 + every_angle*i;
}
},
start:function () {
var vm = this,
gift_l = vm.gifts.length,
every_angle = Math.floor(360/gift_l);
var bRotate = false;
var rotateFn = function (awards, angles, txt){
bRotate = !bRotate;
$('#rotate').stopRotate();
$('#rotate').rotate({
angle:0,
animateTo:angles+1800,
duration:8000,
callback:function (){
vm.result_gift_name = txt;
vm.result_gift_pic = 'images/p'+(awards+1)+'.png';
vm.t_type='gift';
vm.if_tc = true;
bRotate = !bRotate;
}
})
};
if(bRotate)return;
var item = rnd(0,gift_l-1); //随机
if(gift_l==8){
switch (item) {
case 0:
var angle = rnd(1,44); //不取线
rotateFn(0, angle, vm.gifts[0].name);
break;
case 1:
var angle = rnd(46,89); //不取线
rotateFn(8, angle, vm.gifts[7].name);
break;
case 2:
var angle = rnd(91,134); //不取线
rotateFn(7, angle, vm.gifts[6].name);
break;
case 3:
var angle = rnd(136,179); //不取线
rotateFn(6, angle, vm.gifts[5].name);
break;
case 4:
H5手机转盘抽奖活动游戏页面源码.zip （34个子文件） 
72236H5手机转盘抽奖活动游戏页面源码 11551 js 
if_heng.js 810B awardRotate.js 11KB font-size.js 526B vue.min.js 84KB css style.css 7KB
index.html 13KB images 
p7.png 1KB zhuanpan-bg.png 188KB error.png 95B p8.png 1KB p5.png 1KB bottom.png 39KB rule-show.png 11KB zhuanpan.png 10KB gift8.png 13KB my.png 12KB p1.png 1KB p2.png 1KB
bg.jpg 7KB close-btn.png 3KB p4.png 1KB start-btn.png 4KB gift4.png 13KB gift5.png 13KB gift-bg.png 136KB top.png 141KB p6.png 1KB
loading.svg 1KB gift2.png 13KB gift3.png 13KB gift7.png 13KB gift6.png 13KB p3.png 1KB gift1.png 13KB资源评论
智慧浩海
- 粉丝: 1w+
最新资源
- 基于单片机八路抢答器的设计.doc
- 计算机专业中专生自我鉴定.docx
- 基于改进的卷积神经网络多姿态人脸识别研究.pdf
- 网络营销讲义课件.pptx
- 基于EMD算法的滤波系统设计.doc
- 新浪云计算公开课第二期SAE平台的灵活应用吕毅、魏世.pptx
- 基于单片机的智能车设计与实现.doc
- 基于MATLAB的循环码编译码器设计与仿真---胡鑫.doc
- 项目管理师师级其他类1-基础知识(1).pptx
- 项目管理系统规划方案V3.ppt
- 专题讲座资料（2021-2022年）大学计算机基础课程建设与改革.doc
- 最新精品推荐移动互联网加高校智慧校园解决方案.docx
- 2023年销售部门KA网络加盟市场绩效考核KPI.doc
- 网络营销系统研讨.pptx
- 嵌入式学习心得总结.docx
- 计算机病毒木马和间谍软件与防治.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
