基于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:; 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
基于zepto移动4*3九宫格转奖的更多相关文章
- 基于zepto的H5/移动端tab切换触摸拖动加载更多数据
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...
- 基于zepto判断mobile的横竖屏状态
借用jquery mobile中的代码,删除了一些多余的部分,简单的基于zepto的模块 var CheckOrientation = (function(){ var win = $( window ...
- 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...
- 基于zepto的手机焦点图touchstart touchmove
基于zepto的手机焦点图,查看地址:demo (建议使用手机浏览器查看)代码如下: <!DOCTYPE HTML> <html> <head> <title ...
- 基于zepto的移动端日期和时间选择控件
前段时间给大家分享过一个基于jQuery Mobile的移动端日期时间拾取器,大家反应其由于加载过大的插件导致影响调用速度.那么今天我把从网络上搜集到的两个适合移动端应用的日期和时间选择插件分享给大家 ...
- 基于zepto的移动端轻量级日期插件
前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的 ...
- 基于Zepto移动端下拉加载（刷新），上拉加载插件开发
写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...
- 基于 zepto 的触摸函数封装
移动端使用 zepto 做一些基于触摸的动画的时候,需要开发一个函数库. 功能:实例化对象以后能够,触发相应的事件,能够返回给我,当前的移动方向和 X 轴 或者 Y 轴 的移动位移. var Touc ...
- 关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得
1.项目官网地址:http://m.sui.taobao.org/ 2.项目使用可以参考开始使用和示例 3.项目是放在 Github 上的 https://github.com/sdc-alibaba ...
随机推荐
- spring 项目tomcat 8.0.2 发布报错：Could not initialize class org.hibernate.validator.engine.ConfigurationImpl
tomcat 8 项目发布遇到的错 [ERROR] -- ::, org.springframework.web.servlet.DispatcherServlet - Context initial ...
- Java替换字符串中的占位符
在开发中,会有动态配置字符串其中的某些字符,如何使用字符中的占位符,并且在代码动态替换占位符实现动态配置字符串! 1.定义字符串时,再string文件添加字符串: 注意!记得要在字符文件中加上这些: ...
- 解决网络 下载 句柄无效。 (异常来自 HRESULT:0x80070006 (E_HANDLE))
首先要共享该文件 其次 在安全里加IISSHARED 是IIS账号 下载代码 #region 下载 /// <summary> /// 下载 // ...
- 安装和使用jupyter
安装 pip install jupyter 使用 jupyter notebook
- c#中使用NetCDF存储二维数据的读写操作简单应用
[DllImport( [DllImport( [DllImport( ...
- Loadrunder常见问题汇总（持续更新）
1.LR 脚本为空的解决方法: 1)如果安装了IE以外的浏览器,并且IE不是默认浏览器,则无法生成录制脚本 2)如果录制脚本时IE不能打开,则需要将浏览器的IE工具高级选项中,将“启用第三方浏览器扩展 ...
- Shell编程之Linux信号及信号跟踪
一.Linux信号 1.什么是信号? Linux信号是由一个整数构成的异步消息,它可以由某个进程发给其他进程,也可以在用户按下特定键发生某种异常事件时,由系统发给某个进程. 2.信号列表 [root@ ...
- Java中的HashMap
今天到中关村软件园面试被问到Java中HashMap的存值原理,瞬间无言已对,回答用了一个数组,然后沉默,面试官说,一次的面试失败不算什么,之后...... 1.关于hashCode hashCode ...
- 写makefile时候的cc和gcc
Linux 下 的 cc 和 gcc Linux 下 的 cc 和 gcc 周银辉 在Linux下一会看到cc,另一会又看到gcc,感觉又点混乱的样子.它们是同一个东西么,有啥区别呢 一分为二 ...
- Cisco学习笔记
目录 1. 路由 1.1 静态路由 1.2 动态路由 2. 访问控制列表 2.1 标准访问控制列表 2.2 扩展访问控制列表 2.3 命名访问控制列表 3. VLAN 3.1 基础知识 3.2 配置实 ...