你的位置:首页 > Java教程

[Java教程]基于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: [email protected] (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