原生js实现大转盘旋转抽奖效果代码
代码语言:html
所属分类:大转盘
代码描述:原生js实现大转盘旋转抽奖效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<style>
p,
body {
margin: 0;
}
.rui-luck-draw {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
.rui-luck-content {
height: 75vw;
width: 75vw;
max-width: 550px;
max-height: 550px
}
.rui-luck-turntable,
.rui-luck-pointer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: center center;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
}
.rui-luck-name {
font-size: 16px;
text-align: left;
height: 30px;
line-height: 30px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.rui-luck-name a {
text-decoration: none;
color: #777;
padding: 0 20px;
}
.rui-luck-pointer {
width: 27vw;
height: 27vw;
max-width: 205px;
max-height: 205px
}
</style>
</head>
<body>
<div class="rui-luck-content">
<div class="rui-luck-box">
<img id="luckTurntable" src="//repo.bfw.wiki/bfwrepo/images/luky/turntable.png" alt="" class="rui-luck-content rui-luck-turntable">
<img id="luckPointer" onclick="startRotate(this)" src="//repo.bfw.wiki/bfwrepo/images/luky/pointer.png" class="rui-luck-pointer" />
</div>
</div>
<script>
(function (win) {
function LuckDraw(opts) {
this.defaultOPts = {
pointerId: 'luckPointer',
turntableId: 'luckTurntable',
rotateId: 'luckTurntable',
activeClass: 'rui-active',
type: 'turntable',
time: 2000,
luckNumber: 4,
typeNumber: 6,
circleNumber: 10,
success: function () { }
};
// 扩展defaultOPts对象
for (var key in opts) {
this.defaultOPts[key] = opts[key];
}
// 公用参数
this.flag = true;
}
// 重置全局变量
LuckDraw.prototype._resetVariable = function () {
this.flag = true;
this.index = 0;
this.timer = null;
this.endCircle = 1;
this.span = 5;
this.startTime = 20;
this.degAverage = this._keepTwoDecimalFull(360 / this.defaultOPts.typeNumber);
this.minDeg = this.degAverage * this.defaultOPts.luckNumber + this.degAverage / 4 - this.degAverage / 2;
this.maxDeg = this.degAverage * (this.defaultOPts.luckNumber + 1) - this.degAverage / 4 - this.degAverage / 2;
this.luckDeg = this._getRandomNumber(this.minDeg, this.maxDeg);
this.totalLuckDeg = 360 * this.defaultOPts.circleNumber + this.luckDeg;
this.totalLuckNumber = this.defaultOPts.typeNumber * this.defaultOPts.circleNumber + (this.defaultOPts.luckNumber + 1);
this.s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0