自己写了一个大转盘效果，方便以后用到时直接修改使用
原理其实是一开始就已经设置好最终中奖结果，根据这个结果实现旋转的，旋转结束后可做相应操作，代码如下：
转盘抽奖-jquery：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>转盘抽奖test</title>
<style>
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"; font-size:24px; line-height:1.6; color:#000;
-webkit-user-select:none;user-select:none;
-webkit-touch-callout:none;touch-callout:none;
}
li{ list-style:none;}
i{ font-style:normal;}
img{ vertical-align:middle;}
.outBox{ width:500px; height:500px; margin: 0 auto; position: relative;}
.roateBox , .roateBtn{ width:100%; height:100%; position:absolute; left:0; top:0;}
.roateBox.toroate{
-webkit-animation:setroate 5s .1s ease both;
animation:setroate 5s .1s ease both;
}
</style>
<style id="set_roate"></style>
</head>
<body>
<div class="outBox">
<img class="roateBox" src="zp.png" >
<img class="roateBtn" src="zp_btn.png" >
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
//注：根据转盘图片对应的值（转盘图片指针处顺时针向右数，起始1，奖品对应的格子数【第几等份上】）
var awardSetting = [
'第1个格子对应内容',
'第2个格子对应内容',
'第3个格子对应内容',
'第4个格子对应内容',
'第5个格子对应内容',
'第6个格子对应内容',
];
//一共多少等份
var equalParts = awardSetting.length;
//每一等份多少度
var oneAngle = 360 / equalParts;
//根据 设置的 指针停止时指向的格子（中奖结果），设置其旋转角度区间
function setRoate(awardSettingNumber){//awardSettingNumber 取值范围 1 至 总格子数
//转盘停止时 指针 指向的格子 最小角度
minAngle = 360 - awardSettingNumber * oneAngle + 5;
//转盘停止时 指针 指向的格子 最大角度
maxAngle = 360 - (awardSettingNumber - 1) * oneAngle - 5;
//旋转区间
newAngle = Math.floor(minAngle + Math.random() * (maxAngle - minAngle)) + 360 * 15;
var newstyle = '';
newstyle += '@-webkit-keyframes setroate{';
newstyle += '0%{ -webkit-transform:rotate(0deg);}';
newstyle += '100%{ -webkit-transform:rotate(' + newAngle + 'deg);}';
newstyle += '}';
newstyle += '@keyframes setroate{';
newstyle += '0%{ transform:rotate(0deg);}';
newstyle += '100%{ transform:rotate(' + newAngle + 'deg);}';
newstyle += '}';
$('#set_roate').html(newstyle);
$('.roateBox').addClass('toroate');
setTimeout(function(){
roateEnd(awardSettingNumber);
}, 5150);
}
//旋转结束执行
function roateEnd(awardSettingNumber){
console.log(awardSetting[awardSettingNumber-1]);
ifRoate = false;
}
var ifRoate = false;
//点击转动转盘
$('.roateBtn').on('click',function(){
if(ifRoate){
return;
}else{
ifRoate = true;
}
var Time = 0;
// 再次抽奖时须设置
if($('.toroate').length){
$('.roateBox').removeClass('toroate');
Time = 5;
}
setTimeout(function(){
setRoate(Math.floor(1 + Math.random() * equalParts)); //取值范围 1 至 总格子数
},Time);
});
</script>
</body>
</html>转盘抽奖-vue.js：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>转盘抽奖test</title>
<style type="text/css">
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"; font-size:24px; line-height:1.6; color:#000;
-webkit-user-select:none;user-select:none;
-webkit-touch-callout:none;touch-callout:none;
}
li{ list-style:none;}
i{ font-style:normal;}
img{ vertical-align:middle;}
[v-cloak]{ display: none;}
.lucky_draw_zp_box{ width: 500px; height: 500px; margin: 0 auto; position: relative;}
.lucky_draw_zp_img , .lucky_draw_zp_btn{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
</style>
</head>
<body>
<section id="app" v-cloak>
<div class="lucky_draw_zp_box">
<img :style="zpRotateDeg" class="lucky_draw_zp_img" :src="zpData.zpImg" >
<img @click="getLucky" class="lucky_draw_zp_btn" :src="zpData.zpBtn" >
</div>
</section>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var VM = new Vue({
el:"#app",
data:{
//页面初始数据
zpData:{
//转盘主图图片url
zpImg:'zp.png',
//转盘按钮图片url
zpBtn:'zp_btn.png',
//一共多少等份
equalParts:null,
oneAngle:null, //每一等份多少度
// ******** 转盘奖品数据：后台获取数据 ********
//注：根据转盘图片对应的值（转盘图片指针处顺时针向右数，起始1，奖品对应的格子数【第几等份上】）
awardSetting:[
'第1个格子对应内容',
'第2个格子对应内容',
'第3个格子对应内容',
'第4个格子对应内容',
'第5个格子对应内容',
'第6个格子对应内容',
],
},
ifRoate:false, //用户是否点击抽奖（判断阻止多次点击）
zpRotateDeg:'', //旋转角度
// ******** 抽奖结果数据：后台获取数据 ********
curKey:null, //抽奖结果 ： 取值范围 1 至 总格子数
ifWinning:null, //是否中奖
},
created() {
},
mounted() {
//一共多少等份
this.zpData.equalParts = this.zpData.awardSetting.length;
// 根据转盘得等份数设置 每一等份多少度
this.zpData.oneAngle = 360 / this.zpData.equalParts;
},
watch() {
},
methods:{
// 设置旋转动效
setToRotate(degNum){
this.zpRotateDeg = '-webkit-transform: rotate(' + degNum + 'deg);transform: rotate(' + degNum + 'deg);-webkit-transition: all 5s ease;transition: all 5s ease;';
},
//根据 设置的 指针停止时指向的格子（中奖结果），设置其旋转角度区间
setRotate(awardSettingNumber){ //awardSettingNumber 取值范围 1 至 总格子数
this.$nextTick(function(){
setTimeout(() => {
//转盘停止时 指针 指向的格子 最小角度
minAngle = 360 - awardSettingNumber * this.zpData.oneAngle + 5;
//转盘停止时 指针 指向的格子 最大角度
maxAngle = 360 - (awardSettingNumber - 1) * this.zpData.oneAngle - 5;
//旋转区间
newAngle = Math.floor(minAngle + Math.random() * (maxAngle - minAngle)) + 360 * 15;
this.setToRotate(newAngle);
setTimeout(() => {
this.roateEnd(awardSettingNumber);
}, 5150);
},50);
})
},
//旋转结束执行
roateEnd(awardSettingNumber){
console.log('当前指向格子数 -- ' + awardSettingNumber , this.curKey);
console.log('当前指向格子数对应内容 -- ' + this.zpData.awardSetting[awardSettingNumber - 1] , this.zpData.awardSetting[this.curKey - 1]);
// 是否中奖
if(this.ifWinning){
console.log('中奖');
}else{
console.log('未中奖');
}
this.ifRoate = false; //用户是否点击抽奖
},
//抽奖
getLucky(){
if(this.ifRoate){
return false;
}
this.ifRoate = true; //用户是否点击抽奖
this.zpRotateDeg = '';
// 请求后台获取抽奖结果中...
/*test*/
var res = {
status:1,
curKey:Math.floor(1 + Math.random() * this.zpData.equalParts), //抽奖结果 ： 取值范围 1 至 总格子数
ifWinning:true, //是否中奖
info:'没机会或什么什么'
}
/*test*/
/
if(res.status == 1){
this.curKey = res.curKey;
this.ifWinning = res.ifWinning;
this.setRotate(this.curKey);
}else{
this.ifRoate = false; //用户是否点击抽奖
alert('温馨提示' + res.info);
}
/
},
}
})
</script>
</body>
</html>
图片资源：
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
