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是在一个子线程中对自己进行绘制,优势:避 ...
随机推荐
- HDU 5235 Friends (2015 Multi-University Training Contest 2 搜索+剪枝)
题目链接:pid=5305">传送门 题意: n个人给定m个关系.每一个关系为x,y表示x,y是朋友.可是可能是online friends,也可能是offline friends. ...
- Web之真假分页
在web设计中一个无法避免的问题就是分页显示.当数据量特别大的时候,我们不可能将全部的数据都在一个页面进行显示,假设这样将严重影响到它的美观性.所以在这个时候,分页显示则成为了我们的大功臣.当然分页也 ...
- 【经验记录】Android上传文件到服务器
Android中实现上传文件,其实是很简单的,和在java里面是一样的,基本上都是熟悉操作输出流和输入流!还有一个特别重要的就是需要配置content-type的一些参数!如果这些都弄好了,上传就很简 ...
- iOS NSString常用用法大全
版权声明:本文为博主Atany原创文章,未经博主允许不得转载.博客地址:http://blog.csdn.net/yang8456211 一.NSRange 在对NSString介绍之前,我们先要了解 ...
- android UI进阶之实现listview的下拉加载
关于listview的操作五花八门,有下拉刷新,分级显示,分页列表,逐页加载等,以后会陆续和大家分享这些技术,今天讲下下拉加载这个功能的实现. 最初的下拉加载应该是ios上的效果,现在很多应用如新浪微 ...
- Jquery-Ajax常用总结
1.方式一:访问.aspx 客户端: function Del(Id) { if (confirm("确认要删除?")) { $.ajax({ type: "Post&q ...
- PAT 1003
1003. Emergency (25) As an emergency rescue team leader of a city, you are given a special map of yo ...
- Redis 安全
我们可以通过 redis 的配置文件设置密码参数,这样客户端连接到 redis 服务就需要密码验证,这样可以让你的 redis 服务更安全. 实例 我们可以通过以下命令查看是否设置了密码验证: 1 ...
- AVFoundation视频流处理
框架 首先我们从整体对所需框架做个初步了解. AVFoundation在相关框架栈中的的位置: 为了捕捉视频,我们需要这样几种类(与其它的子类). AVCaptureDevice 代表了输入设备,例如 ...
- 笔记——ES5 Array
ES5里引入了一些新的数组方法.这些方法可以分为两组: 迭代方法和项的定位. 兼容性:chrome,firefox,safari3,及ie8以上都支持 1. every 查询数组中的每一项是否匹配某个 ...