原生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