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是在一个子线程中对自己进行绘制,优势:避 ...
随机推荐
- [Angular 2] *ngFor
heros.ts: import {Component} from "@angular/core"; const HEROES = [ {id: 1, name:'Superman ...
- Lua调用自定义C++类
弄了一天终于会Lua调用自定义C++类.不容易啊. 我的电脑是64位的,装了64的Python不行,装了32位的就可以了,靠!下面是报错信息 python pyyaml Cheetah全都是装32位的 ...
- jQuery获取表单各元素的值
radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio' ...
- 利用 Composer 一步一步构建自己的 PHP 框架（四）——使用 ORM
本教程示例代码见 https://github.com/johnlui/My-First-Framework-based-on-Composer 回顾 经过前三篇文章 基础准备 . 构建路由 和 设计 ...
- yeelink使用笔记
一.触发条件设置 下面是我在群113978926里获得的解释: 摩斯电码<pengdonglin137@qq.com> 13:15:26 触发规则有什么限制吗怎么我设置的条件有时候无效呢 ...
- 有符号的范围,-128~+127详解（zt）
这是一个困惑了我几年的问题,它让我对现在的教科书和老师极其不满,从我N年前开始摸电脑时,就几乎在每一本C++教科书上都说,8位有符号的取值范围是-128~+127,为什么不是-127~+127呢,后来 ...
- VB读写INI文件的四个函数以及相关API详细说明
WritePrivateProfileString函数说明 来源:http://blog.csdn.net/wjb9921/article/details/2005000 在我们写的程序当中,总有一 ...
- 最小K个数之和
描述 输入n个整数,输出其中最小的K个数之和.例如输入4,5,1,1,6,2,7,3,3这9个数字,当k=4,则输出最小的4个数之和为7(1,1,2,3). 输入 测试样例组数不超过10 每个测试案例 ...
- 查看Oracle执行计划的几种方法
查看Oracle执行计划的几种方法 一.通过PL/SQL Dev工具 1.直接File->New->Explain Plan Window,在窗口中执行sql可以查看计划结果.其中,Cos ...
- android开发之路08（ListView&Adapter）
ListView控件介绍:用于将数据库中的数据或者网络中的数据通过列表的形式显示出来:ListView采用MVC模式将前端显示和后端数据进行分离. 也就是说,ListView控件在装载数据时并不是直接 ...