于zepto实现的适合移动网页的大转盘效果

操作方法

• 01

  准备好需要用到的图。

  
• 02

  新建html文档。

  
• 03

  书写hmtl代码。<div id="box" class="box"><div class="outer KinerLottery KinerLotteryContent"><img src="./images/zzz.png"></div>进行匹配状态 --><div class="inner KinerLotteryBtn start"></div></div>

  
• 04

  书写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; }

  
• 05

  书写并添加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>

  
• 06

  书写<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>

  
• 07

  代码整体结构。

• 08

  查看效果。