基于zepto移动4*3九宫格转奖
2024-09-04 11:18:45
最近根据公司需求，要把移动端的圆形转盘抽奖，改为九宫格的形式，查找资料搞定了，纪录下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:; padding:; border:; 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:;}
* {
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:; 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
最新文章
- asp.net 项目Net4.0 在IE10、 IE 11 下出现 “__doPostBack”未定义 的解决办法
- yield 用法分析
- LR11启动卡修改
- 问题解决——使用GP-3120TN打印条形码标签
- 【剑指offer】和为S的连续整数序列
- python的print(转)
- Part 67 to 70 Talking about method parameters in C#
- TCP/IP三次握手
- C++ 约瑟夫环
- Jq 遍历 全选 全不选 反选
- 从一个非开发人员转行silverlight满一年的工作总结（第一次发帖）
- kill -3 导出 thread dump
- 聊聊keep-alive组件的使用及其实现原理
- Html 段落自动换行
- 夏令营提高班上午上机测试 Day 4 解题报告
- ubuntu16.04下latex环境搭建
- apache和nginx结合使用
- Could not resolve all dependencies for configuration ':classpath'
- 自学Linux Shell12.1-结构化命令if-then
- IDEA中Gradle插件的使用