操作方法
准备好需要用到的图。
新建html文档。
书写hmtl代码。 <div id="box" class="box"> <div class="outer KinerLottery KinerLotteryContent"><img src="./images/zzz.png"></div>进行匹配状态 --> <div class="inner KinerLotteryBtn start"></div> </div>
书写css代码。 html { font-size: 20px; } @media only screen and (min-width:401px) { html { font-size: 25px !important; } } @media only screen and (min-width:428px) { html { font-size: 26.75px !important; } } @media only screen and (min-width:481px) { html { font-size: 30px !important; } } @media only screen and (min-width:569px) { html { font-size: 35px !important; } } @media only screen and (min-width:641px) { html { font-size: 40px !important; } } html, body { padding: 0; margin: 0; background: #fffeea; height: 100%; } p, li, b, span, div, strong, h1, h2, h3, h4, h5, h6, a, ul { margin: 0; padding: 0; text-decoration: none; list-style: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .box { width: 14rem; height: 14rem; position: relative; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .box .outer { width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } .box .outer img { width: 100%; } .box .inner { position: relative; width: 5rem; height: 5rem; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; background-image: url(../images/arrow.png); background-size: auto 5rem; background-repeat: no-repeat; } .box .inner.start:active { -webkit-transform: translate(-50%, -50%) scale(.95); -moz-transform: translate(-50%, -50%) scale(.95); -ms-transform: translate(-50%, -50%) scale(.95); -o-transform: translate(-50%, -50%) scale(.95); transform: translate(-50%, -50%) scale(.95); } .box .inner.start { background-position: 0 0; } .box .inner.no-start { background-position: -5rem 0; } .box .inner.completed { background-position: -10rem 0; }
书写并添加js代码。 <script src="js/zepto.min.js"></script> <script src="js/kinerLottery.js"></script> <script> var whichAward = function(deg) { if ((deg > 330 && deg <= 360) || (deg > 0 && deg <= 30)) { //10M流量 return "10M"; } else if ((deg > 30 && deg <= 90)) { return "iPhone7"; } else if (deg > 90 && deg <= 150) { return "30M"; } else if (deg > 150 && deg <= 210) { return "费5"; } else if (deg > 210 && deg <= 270) { return "ipad mini4"; } else if (deg > 270 && deg <= 330) { return "费2"; } } var KinerLottery = new KinerLottery({ rotateNum: 8, body: "#box", direction: 0, disabledHandler: function(key) { switch (key) { case "noStart": alert("尚未开始"); break; case "completed": alert("已结束"); break; } }, clickCallback: function() { function random() { return Math.floor(Math.random() * 360); } this.goKinerLottery(random()); }, KinerLotteryHandler: function(deg) { alert("获得:" + whichAward(deg)); } }); </script>
书写<script src="js/kinerLottery.js"></script> 代码。 <script> (function(win, doc, $) { var defaultOpt = { rotateNum: 5, body: "", disabledHandler: function() {}, clickCallback: function() {}, KinerLotteryHandler: function(deg) {} }; function KinerLottery(opts) { this.opts = $.extend(true, {}, defaultOpt, opts); this.doing = false; this.init(); } KinerLottery.prototype.setOpts = function(opts) { this.opts = $.extend(true, {}, defaultOpt, opts); this.init(); }; KinerLottery.prototype.init = function() { var self = this; this.defNum = this.opts.rotateNum * 360; $('body').on('click', ".KinerLotteryBtn", function() { if ($(this).hasClass('start') && !self.doing) { console.log('点击'); self.opts.clickCallback.call(self); } else { var key = $(this).hasClass('no-start') ? "noStart" : $(this).hasClass('completed') ? "completed" : "illegal"; self.opts.disabledHandler(key); } }); $(this.opts.body).find('.KinerLotteryContent').get(0).addEventListener('webkitTransitionEnd', function() { self.doing = false; var deg = $(self.opts.body).attr('data-deg'); if (self.opts.direction == 0) { $(self.opts.body).attr('data-deg', 360 - deg); $(self.opts.body).find('.KinerLotteryContent').css({ '-webkit-transition': 'none', 'transition': 'none', '-webkit-transform': 'rotate(' + (deg) + 'deg)', 'transform': 'rotate(' + (deg) + 'deg)' }); self.opts.KinerLotteryHandler(360 - deg); } else { $(self.opts.body).attr('data-deg', deg); $(self.opts.body).find('.KinerLotteryContent').css({ '-webkit-transition': 'none', 'transition': 'none', '-webkit-transform': 'rotate(' + (-deg) + 'deg)', 'transform': 'rotate(' + (-deg) + 'deg)' }); self.opts.KinerLotteryHandler(deg); } }); }; KinerLottery.prototype.goKinerLottery = function(_deg) { if (this.doing) { return; } var deg = _deg + this.defNum; var realDeg = this.opts.direction == 0 ? deg : -deg; this.doing = true; $(this.opts.body).find('.KinerLotteryBtn').addClass('doing'); $(this.opts.body).find('.KinerLotteryContent').css({ '-webkit-transition': 'all 5s', 'transition': 'all 5s', '-webkit-transform': 'rotate(' + (realDeg) + 'deg)', 'transform': 'rotate(' + (realDeg) + 'deg)' }); $(this.opts.body).attr('data-deg', _deg); }; win.KinerLottery = KinerLottery; })(window, document, $); </script>
代码整体结构。
查看效果。