基于zepto移动4*3九宫格转奖
最近根据公司需求，要把移动端的圆形转盘抽奖，改为九宫格的形式，查找资料搞定了，纪录下demo代码。
页面的展现样式，如下
比较简单，就是红色的背景图，在这10个格子里转动
具体代码如下
html
<!DOCTYPE html> <html> <head lang="cn"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>幸运大转盘</title> <link href="css/rotary4X3.css" rel="stylesheet" type="text/css"> </head> <body ng-app="rotaryTable" ng-controller="rotaryTableController"> <section> <div id="lottery"> <table class="lazyimg" border="0" cellpadding="0" cellspacing="0"> <tr class="lottery-group"> <td class="lottery-unit td_1 active" > <div > <img id="img1" src="img/1.png"/> </div> </td> <td class="lottery-unit td_2"> <div> <img id="img2" src="img/5.png"/> </div> </td> <td class="lottery-unit td_3"> <div> <img id="img3" src="img/3.png"/> </div> </td> <td class="lottery-unit td_10"> <div> <img id="img4" src="img/4.png"/> </div> </td> </tr> <tr class="lottery-group"> <td class="lottery-unit td_4"> <div> <img id="img5" src="img/5.png"/> </div> </td> <td colspan="2" class="go"> <a href="javascript:void(0)"> <img src="img/x.gif"/> </a> </td> <td class="lottery-unit td_6"> <div> <img id="img6" src="img/6.png"/> </div> </td> </tr> <tr class="lottery-group"> <td class="lottery-unit td_7"> <div> <img id="img7" src="img/3.png"/> </div> </td> <td class="lottery-unit td_8"> <div> <img id="img8" src="img/8.png"/> </div> </td> <td class="lottery-unit td_9"> <div > <img id="img9" src="img/9.png"/> </div> </td> <td class="lottery-unit td_5"> <div> <img id="img10" src="img/10.png"/> </div> </td> </tr> </table> </div> </section> <script src="js/zepto.min.js"></script> <script src="js/lottery.js"></script> <script src="js/rotary4X3.js"></script> </body> </html>
css
html{font-size:10px;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-weight: normal; vertical-align:baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} body {font-family:"Microsoft YaHei", Arial, Helvetica, sans-serif; background:#f5f5f5;} ol, ul { list-style:none;} em, i{font-style: normal;} blockquote, q { quotes:none;} blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;} table { border-collapse:collapse; border-spacing:0;} * { tap-highlight-color:rgba(0, 0, 0, 0); -webkit-tap-highlight-color:rgba(0, 0, 0, 0); -ms-tap-highlight-color:rgba(0, 0, 0, 0); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } input, textarea { outline:0; resize:none; -webkit-appearance: none;} img{vertical-align: middle;} a{display: block; color: #333; text-decoration: none;} #lottery{height:225px;width:300px;padding:14px 18px;margin: 50px auto;background: url(../img/sudoku_bg.png) no-repeat;background-size: 100%;} #lottery table td{width:66px;height:66px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999} #lottery table td a{width:66px;height:66px;line-height:63px;display:block;text-decoration:none;} #lottery table td img{width: 100%} /*给苹果6和6P做下简单的适配*/ @media (min-width: 350px) { #lottery{height:270px;width:360px;padding:17px 22px;} #lottery table td{width:79px;height:79px;} #lottery table td a{width:79px;height:79px;line-height:76px;} } #lottery table td.active{background:url(../img/sudoku_active.png) no-repeat;}
lottery.js
var defaults = { selector: '#lottery', width: 3, // 转盘宽度 height: 4, // 转盘高度 initSpeed: 300, // 初始转动速度 speed: 0, // 当前转动速度 upStep: 50, // 加速滚动步长 upMax: 50, // 速度上限 downStep: 30, // 减速滚动步长 downMax: 500, // 减速上限 waiting: 3000, // 匀速转动时长 index: 0, // 初始位置 target: 1, // 中奖位置，可通过后台算法来获得，默认值：最便宜的一个奖项或者"谢谢参与" isRunning: false, // 当前是否正在抽奖 msg:"" //转奖结束时提示语 }; var lottery = { // 初始化用户配置 lottery: function (options) { this.options = $.extend(true, defaults, options); this.options.speed = this.options.initSpeed; this.container = $(this.options.selector); this._setup(); }, // 开始装配转盘 _setup: function () { // 这里为每一个奖项设置一个有序的下标，方便lottery._roll的处理 // 初始化第一行lottery-group的序列 var groups = this.container.find(".lottery-group"), groupFirst = groups.eq(0); for (var i = 0; i < this.options.width; ++i) { groupFirst.find(".lottery-unit").eq(i).attr('lottery-unit-index', i); } // 初始化最后一行lottery-group的序列 var groupLast = groups.eq(groups.length - 1); for (var i = lottery._count() - this.options.height + 1, j = 0, len = this.options.width + this.options.height - 2; i >= len; --i, ++j) { groupLast.find(".lottery-unit").eq(j).attr('lottery-unit-index', i); } // 初始化两侧lottery-group的序列 for (var i = 1, len = this.options.height - 2; i <= len; ++i) { var lotteryUnits = groups.eq(i).find(".lottery-unit"), lotteryUnitsFirst = lotteryUnits.eq(0), lotteryUnitsLast = lotteryUnits.eq(lotteryUnits.length - 1); lotteryUnitsFirst.attr('lottery-unit-index', lottery._count() - i); lotteryUnitsLast.attr('lottery-unit-index', this.options.width + i - 1); } this._enable(); }, // 开启抽奖 _enable: function () { this.container.find('.go').bind('click', this.beforeRoll); }, // 禁用抽奖 _disable: function () { this.container.find('.go').unbind('click', this.beforeRoll); }, // 转盘加速 _up: function () { var _this = this; if (_this.options.speed <= _this.options.upMax) { _this._constant(); } else { _this.options.speed -= _this.options.upStep; _this.upTimer = setTimeout(function () { _this._up(); }, _this.options.speed); } }, // 转盘匀速 _constant: function () { var _this = this; clearTimeout(_this.upTimer); setTimeout(function () { _this.beforeDown(); }, _this.options.waiting); }, // 减速之前的操作，支持用户追加操作（例如：从后台获取中奖号） beforeDown: function () { var _this = this; _this.aim(); if (_this.options.beforeDown) { _this.options.beforeDown.call(_this); } _this._down(); }, // 转盘减速 _down: function () { var _this = this; if (_this.options.speed > _this.options.downMax && _this.options.target == _this._index()) { _this._stop(); } else { _this.options.speed += _this.options.downStep; _this.downTimer = setTimeout(function () { _this._down(); }, _this.options.speed); } }, // 转盘停止，还原设置 _stop: function () { console.log(this); var _this = this; clearTimeout(_this.downTimer); clearTimeout(_this.rollerTimer); _this.options.speed = _this.options.initSpeed; _this.options.isRunning = false; _this._enable(); var msg = lottery.options.msg; if (msg && msg != "") { alert(msg) } }, // 抽奖之前的操作，支持用户追加操作 beforeRoll: function () { var _this = lottery, beforeCheck = _this.options.beforeRoll; if(beforeCheck && typeof beforeCheck == "function"){ beforeCheck(function(){ _this._disable(); _this._roll(); }); } }, // 转盘滚动 _roll: function () { var _this = this; _this.container.find(".lottery-unit").removeClass("active"); ++_this.options.index; _this.container.find(".lottery-unit").each(function () { var unitIndex = $(this).attr("lottery-unit-index"); if(Number(unitIndex) == Number(_this._index())){ $(this).addClass("active"); } }); _this.rollerTimer = setTimeout(function () { _this._roll(); }, _this.options.speed); if (!_this.options.isRunning) { _this._up(); _this.options.isRunning = true; } }, // 转盘当前格子下标 _index: function () { return this.options.index % this._count(); }, // 转盘总格子数 _count: function () { return this.options.width * this.options.height - (this.options.width - 2) * (this.options.height - 2); }, // 获取中奖号，用户可重写该事件，默认随机数字 aim: function () { var _this = this, rollAim = _this.options.aim; if(rollAim && typeof rollAim == "function"){ rollAim(function(to,msg){ _this.options.target = Number(to); _this.options.msg = msg; }); } } };
rotary4X3.js
$(function(){ lottery.lottery({ selector: '#lottery', width: 4, height: 3, index: 0, // 初始位置 initSpeed: 500, // 初始转动速度 beforeRoll: function(callback) { //转动前进行校验 //模拟转动前做的一些校验 setTimeout(function(){ /* * 当出现某某问题，在此处可以给出提示，直接return * ..... * */ if (callback && typeof callback == "function") { callback(); } },500); }, aim: function(callback) { //转动中确定终点 //模拟快结束时，获取终点，和弹出信息 setTimeout(function(){ if (callback && typeof callback == "function") { //默认到第4个方块，提示信息为“恭喜恭喜” callback(3,"恭喜恭喜"); } },1000); } }); })
源码的下载地址为
http://download.csdn.net/detail/hufengsky123/9263411
