jquery实现抽奖转盘
用jquery通过配置参数实现抽奖转盘
1.html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>抽奖活动</title>
<meta name="keyword" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<script type="text/javascript" src="js/jquery.js"></script>
<!-- 业务样式 -->
<link rel="stylesheet" type="text/css" href="css/index.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://static.51offer.com/skin/css/study-abroad-steps/ie.css"/>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="container_wrap">
<div class="container_left clearfix" id="zhuanpan">
<div class="zhuanpan">
<ul class="zhuanpan1">
<li class="libao"></li>
<li class="mobile_shell"></li>
<li class="note"></li>
<li class="better"></li>
<li class="quan"></li>
<li class="tshirt"></li>
</ul>
</div>
<img class="choujiang" src="img/choujiang.png">
<img class="have_choujiang" src="img/reward.png">
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
2.调用的js
var config = {
"rollId": '#rollId', //外层divid
"rollBtn": ".rollBtn", //点击滚动的按钮--class
"rollList": ".rollList",
"pinIndex": 0, //滚动的起点
"speed": 200, //滚动的速度
"cycle": 0, //滚动的圈数
"fastCycle": 5, //快速滚动圈数
"rollResult": 4 //抽奖的结果
};
var Roll = function() {
var self = this;
self.config = config;
self.stopIndex = '';
self.isRolling = false;
self.timer = null;
self.ops = '';
self.rollId = '';
self.rollBtn = '';
self.rollList = '';
self.rollIndex = 0;
}
var roll=new Roll();
$(function(){
$(".choujiang").on("click",function(){
rollFun(4);
});
})
function rollFun(prize_code) {
roll.init({
"rollId": '#zhuanpan',
"rollBtn": ".choujiang",
"rollList": ".zhuanpan1",
"pinIndex": 0,
"rollResult": prize_code
});
roll.start();
}
Roll.prototype.init = function(options) {
var self = this;
self.ops = $.extend({}, self.config, options);
self.rollId = $(self.ops.rollId);
self.rollBtn = self.rollId.find(self.ops.rollBtn);
self.rollList = self.rollId.find(self.ops.rollList).find('li');
self.stopIndex = self.ops.rollResult;
};
// 按钮事件
Roll.prototype.start = function() {
this.rollPre();
};
Roll.prototype.rollPre = function() {
var self = this;
if (!self.isRolling) {
self.rollList.eq(self.ops.pinIndex).show().siblings().hide();
rollStart(self); // 开始启动转盘
}
};
// 指向下一个
function rollGoNext(self) {
self.rollIndex += 1;
if (self.rollIndex > self.rollList.length) {
self.rollIndex = 0;
self.ops.cycle++;
}
self.rollList.eq(self.rollIndex).show().siblings().hide();
}
// 停止转动
function rollStop(self) {
clearInterval(self.timer);
(function stopGoNext() {
if (self.rollIndex !== self.stopIndex) {
rollGoNext(self);
setTimeout(function() {
stopGoNext();
}, 300);
} else {
self.isRolling = false;
self.ops.cycle = 0;
self.rollIndex = 0;
$(".choujiang").hide();
$(".have_choujiang").show();
// self.ev.trigger('succeed', {
// rollResult: self.stopIndex
// });
}
})();
}
//开始转动
function rollStart(self) {
self.isRolling = true;
self.timer = setInterval(function() {
rollGoNext(self);
if (self.rollIndex == 5) {
clearInterval(self.timer);
self.ops.speed = 20;
self.timer = setInterval(function() {
rollGoNext(self);
if (self.ops.cycle >= 5) {
clearInterval(self.timer);
self.ops.speed = 200;
self.timer = setInterval(function() {
if (self.ops.cycle === 6) {
rollStop(self);
} else {
rollGoNext(self);
}
}, self.ops.speed);
}
}, self.ops.speed);
}
}, self.ops.speed);
}
3.效果图
源代码：http://files.cnblogs.com/files/gzx618/roll.zip
jquery实现抽奖转盘的更多相关文章
- 利用java实现抽奖转盘(着重安全控制)
本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...
- jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- jquery——九宫格大转盘抽奖
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...
- 使用CSS3+jquery.js 实现微信抽奖转盘效果
上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...
- 用jquery实现抽奖小程序
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
- jquery实现抽奖
用jquery实现抽奖小程序 用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jq ...
- Html5-Canvas实现简易的抽奖转盘
###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...
- 模仿抽奖转盘,并且用cookie记录历史次数
自己制作了一个模仿抽奖转盘的小游戏,代码比较简单,规则是只有三次抽奖机会,并且浏览器会记录抽奖的次数, 代码如下 <!DOCTYPE html> <html> <head ...
- Android实现抽奖转盘
一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...
随机推荐
- CSS3/jQuery自己定义弹出窗体
简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...
- 升级、备份红帽PaaS openshift 上的 wordpress
红帽提供了一个很稳定的PAAS服务平台:openshift!此博客即作为wordpress建在里面. 这里记录怎样升级与备份wordpress. 预备: 安装 openshift command li ...
- iOS开发——笔记篇&关于字典plist读取／字典转模型／自定义View／MVC／Xib的使用／MJExtension使用总结
关于字典plist读取/字典转模型/自定义View/MVC/Xib的使用/MJExtension使用总结 一:Plist读取 /************************************ ...
- springMVC2 1入门程序
1入门程序 .1需求 实现商品列表查询 .2需要的jar包 使用spring3.2.0(带springwebmvc模块) .1前端控制器 在web.xml中配置: <?xml version=& ...
- xtrabackup原理0
- 关于Android M RuntimePermission的问题
关于shouldShowRequestPermissionRationale的理解, 在onRequestPermissionsResult里如果用户拒绝了权限, 可以调用这个api, 返回true, ...
- spring源码分析之spring-jms模块详解
0 概述 spring提供了一个jms集成框架,这个框架如spring 集成jdbc api一样,简化了jms api的使用. jms可以简单的分成两个功能区,消息的生产和消息的消费.JmsTempl ...
- Linux 学习笔记 Linux环境变量初稿
set命令会显示为某个特定进程设置的所有环境变量,但不包括一些没有设置值的默认环境变量 可以通过等号来给环境变量赋值,值可以是数值或字符串 如果要给变量赋一个含有空格的字符串值,必需用单引号来界定字符 ...
- 使用文档注释（javadoc）
相信作为Java程序猿,几乎每个人都使用过javac,Java这样的命令吧.想想我们平时使用的Java帮助文档(API),感觉挺好用的,其实它就是使用Java中的命令javadoc做成的.下面简单介绍 ...
- 解决ajax回调函数无返回值得问题
这里以编辑验证角色名为例: 首先,定义一个flag全局变量. 然后,在回调函数resp()中根据判断将flag的值设为true或false. 最后,在调用函数ckrname()中,return fla ...