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