原生js实现大转盘抽奖效果代码
代码语言:html
所属分类:大转盘
代码描述:原生js实现大转盘抽奖效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="email=no" name="format-detection">
<meta content="telephone=no" name="format-detection">
<meta name="msapplication-tap-highlight" content="no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<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-draw">
<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>
</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 - .........完整代码请登录后点击上方下载按钮下载查看
网友评论0