jQueryRotate 转盘抽奖代码实现
代码如下：
例子兼容IE6,7,8 以及高版本浏览器，如有bug请回复！
1、html结构
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.box{width:503px;height:525px;background:url(zhuanpan.png) no-repeat;position:relative;margin:0 auto;}
#rotate{width:121px;height:160px;position:absolute;top:176px;left:193px;border:none;cursor:pointer;}
</style>
</head>
<body>
<div class="box">
<div class="lottery-star">
<img src="start.png" id="rotate">
</div>
</div>
</body>
</html>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="index.js"></script>
2、index.js主要代码
/*
为了页面兼容IE6.7.8 页面指针必须采用image标签插入
例如代码：外面的div可以不要
<div class="lottery-star">
<img src="start.png" id="rotate">
</div>
*/
var lottery = {
/*
转盘配置位置
0、obj 需要转动的指针对象【必选】
1、angle 角度设计 代表每个区域所属角度范围 【可选】
2、num 奖项的数量【必选】 如果没有设置angle 则表示每个盘子平均分配
3、offsetAlw容差范围 默认为2 指针偏向区域内的位置，防止进入边界【可选】
4、duration 转盘转动时间 默认为5s【可选】
5、turnNum 转动的圈数 默认为5圈【可选】
6、parmIndex 中奖编号的参数名称【必选】
7、parmText 中奖编号对应的奖品名称参数【必选】\
例如：
lottery.config = {
'obj':".rotate",
'angle':[[0,45],[45,120],[120,160],[160,240],[240,300],[300,360]],
'num':6,
'offsetAlw':3,
'duration':1000,
'turnNum':1,
'parmIndex':'index',
'parmText':'text'
}
*/
config:{
'obj':null,
'num':0,
'parmIndex':'',
'parmText':''
},
/*
获取元素的绝对位置，及宽度高度属性
element dom元素
*/
getpos:function(element){
if ( arguments.length != 1 || element == null ) {
return null;
}
var offsetTop = element.offsetTop;
var offsetLeft = element.offsetLeft;
var offsetWidth = element.offsetWidth;
var offsetHeight = element.offsetHeight;
while( element = element.offsetParent ) {
offsetTop += element.offsetTop;
offsetLeft += element.offsetLeft;
}
return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
offsetWidth: offsetWidth, offsetHeight: offsetHeight };
},
/*
创建遮罩层
*/
createHov:function(){
var box = $(this.config['obj'])[0];
var pos = this.getpos(box);
var div = document.createElement('div');
div.id = 'pos_h_cread';
div.style.position = 'absolute';
div.style.zIndex = 9999999;
div.style.left = (pos.absoluteLeft - 25) + 'px';
div.style.top = (pos.absoluteTop - 25) + 'px';
div.style.width = (pos.offsetWidth + 50) + 'px';
div.style.height = (pos.offsetHeight + 50) + 'px';
document.getElementsByTagName("body")[0].appendChild(div);
},
/*
删除遮罩层
*/
removeHov:function(){
var n = document.getElementById('pos_h_cread');
if(n && n.parentNode && n.tagName != 'BODY'){
n.parentNode.removeChild(n);
}
},
/*
* 获取2个值之间的随机数
* smin 数值的下限
* smax 数值的上限
*/
randomnum:function(smin, smax) {
var Range = smax - smin;
var Rand = Math.random();
return (smin + Math.round(Rand * Range));
},
/*
*
* 计算转盘角度生成随机的角度返回给转盘
* jsons:奖励对应的json数据
* num：奖励的数量
*
*/
runzp:function(jsons,num) {
var data = '[{"prize":"'+ jsons[this.config['parmText']] +'","v":100.0}]';
var obj = $.parseJSON(data);
var result = this.randomnum(1, 100);
var line = 0;
var temp = 0;
var returnobj = "0";
var index = 0;
for (var i = 0; i < obj.length; i++) {
var obj2 = obj[i];
var c = parseFloat(obj2.v);
temp = temp + c;
line = 100 - temp;
if (c != 0) {
if (result > line && result <= (line + c)) {
index = parseInt(jsons[this.config['parmIndex']]);
returnobj = obj2;
break;
}
}
}
var angle = 330;//角度为330
var myreturn = new Object;
if (returnobj != "0") {// 有奖
var anglearr = [];//奖品角度设置
if(!!this.config.angle){
anglearr = this.config.angle;
}else{
for(var i = 0;i < num;i++){
var baseAngle = 360/num;//基础角度
anglearr[i] = [baseAngle*i,baseAngle*(i+1)];
}
}
if(index != 0){
var r = this.randomnum(anglearr[index-1][0] + this.config['offsetAlw'], anglearr[index-1][1] - this.config['offsetAlw']);//随机产生中奖奖区间的位置角度
angle = r;
}
myreturn.prize = returnobj.prize;//返回奖励名称
} else {
this.error();
}
myreturn.angle = angle;
return myreturn;
},
/*
* 指针转动方法
* obj：json数据，中奖的信息参数
* callback：回调函数
*/
zhenscroll:function(obj,callback){
this.createHov();
var a = this.runzp(obj,this.config['num']);//返回计算过的对象
var durationT = !!this.config['duration'] ? this.config['duration'] : 5000;
var turnNum = !!this.config['turnNum'] ? this.config['turnNum'] : 5;
$(this.config['obj']).stopRotate();
$(this.config['obj']).rotate({
duration:durationT, //转动时间
angle: 0, //起始角度
animateTo:turnNum*360 + a.angle, //结束的角度
easing: $.easing.easeOutSine,//动画效果，需加载jquery.easing.min.js
callback: function(){
lottery.removeHov();
//转盘结束后回调位置
if(callback){
callback();
}
}
});
},
/*
开始执行
fn：执行函数
*/
start:function(fn){
$(this.config['obj']).rotate({
bind:{
click:function(){
if(fn){fn();}
}
}
});
},
error:function(){
alert('抽奖失败！');
}
};
//配置参数
lottery.config = {
'obj':'#rotate',
'angle':[[0,60],[60,120],[120,180],[180,240],[240,300],[300,360]],
'num':6,
'offsetAlw':3,
'duration':5000,
'turnNum':5,
'parmIndex':'index',
'parmText':'text'
}
function ajaxG(){
var result = null;
$.ajax({
type: 'GET',
url: 'reword.php',
data: '',
async:false,
dataType:'json',
error:function(){
alert('抽奖失败');
},
success: function(data){
result = data;
}
});
return result;
}
$(function(){
lottery.start(function(){
var s = ajaxG();
var index = s.reward;//奖品编号
var text = s.text;//奖品名称
var obj = '{"'+ lottery.config['parmIndex'] +'":'+ index +',"'+ lottery.config['parmText'] +'":"'+ text +'"}';
obj = $.parseJSON(obj);
lottery.zhenscroll(obj,function(){
alert(text);
});
});
});
优化代码：
/*
为了页面兼容IE6.7.8 页面指针必须采用image标签插入
例如代码：外面的div可以不要
<div class="lottery-star">
<img src="start.png" id="rotate">
</div>
*/
var lottery = {
/*
转盘配置位置
0、obj 需要转动的指针对象【必选】
1、angle 角度设计 代表每个区域所属角度范围 【可选】
2、num 奖项的数量【必选】 如果没有设置angle 则表示每个盘子平均分配
3、offsetAlw容差范围 默认为2 指针偏向区域内的位置，防止进入边界【可选】
4、duration 转盘转动时间 默认为5s【可选】
5、turnNum 转动的圈数 默认为5圈【可选】
6、parmIndex 中奖编号的参数名称【必选】
7、parmText 中奖编号对应的奖品名称参数【必选】\
例如：
lottery.config = {
'obj':".rotate",
'angle':[[0,45],[45,120],[120,160],[160,240],[240,300],[300,360]],
'num':6,
'offsetAlw':3,
'duration':1000,
'turnNum':1,
'parmIndex':'index',
'parmText':'text'
}
*/
config:{
'obj':null,
'num':0,
'parmIndex':'',
'parmText':''
},
/*
转动开关
*/
switchW:true,
/*
* 获取2个值之间的随机数
* smin 数值的下限
* smax 数值的上限
*/
randomnum:function(smin, smax) {
var Range = smax - smin;
var Rand = Math.random();
return (smin + Math.round(Rand * Range));
},
/*
*
* 计算转盘角度生成随机的角度返回给转盘
* jsons:奖励对应的json数据
* num：奖励的数量
*
*/
runzp:function(jsons,num) {
var data = '[{"prize":"'+ jsons[this.config['parmText']] +'","v":100.0}]';
var obj = $.parseJSON(data);
var result = this.randomnum(1, 100);
var line = 0;
var temp = 0;
var returnobj = "0";
var index = 0;
for (var i = 0; i < obj.length; i++) {
var obj2 = obj[i];
var c = parseFloat(obj2.v);
temp = temp + c;
line = 100 - temp;
if (c != 0) {
if (result > line && result <= (line + c)) {
index = parseInt(jsons[this.config['parmIndex']]);
returnobj = obj2;
break;
}
}
}
var angle = 330;//角度为330
var myreturn = new Object;
if (returnobj != "0") {// 有奖
var anglearr = [];//奖品角度设置
if(!!this.config.angle){
anglearr = this.config.angle;
}else{
for(var i = 0;i < num;i++){
var baseAngle = 360/num;//基础角度
anglearr[i] = [baseAngle*i,baseAngle*(i+1)];
}
}
if(index != 0){
var r = this.randomnum(anglearr[index-1][0] + this.config['offsetAlw'], anglearr[index-1][1] - this.config['offsetAlw']);//随机产生中奖奖区间的位置角度
angle = r;
}
myreturn.prize = returnobj.prize;//返回奖励名称
} else {
this.error();
}
myreturn.angle = angle;
return myreturn;
},
/*
* 指针转动方法
* obj：json数据，中奖的信息参数
* callback：回调函数
*/
zhenscroll:function(obj,callback){
var a = this.runzp(obj,this.config['num']);//返回计算过的对象
var durationT = !!this.config['duration'] ? this.config['duration'] : 5000;
var turnNum = !!this.config['turnNum'] ? this.config['turnNum'] : 5;
$(this.config['obj']).stopRotate();
$(this.config['obj']).rotate({
duration:durationT, //转动时间
angle: 0, //起始角度
animateTo:turnNum*360 + a.angle, //结束的角度
easing: $.easing.easeOutSine,//动画效果，需加载jquery.easing.min.js
callback: function(){
lottery.switchW = true;
//转盘结束后回调位置
if(callback){
callback();
}
}
});
},
/*
开始执行
fn：执行函数
*/
start:function(fn){
$(this.config['obj']).rotate({
bind:{
click:function(){
if(fn){fn();}
}
}
});
},
error:function(){
alert('抽奖失败！');
}
};
//配置参数
lottery.config = {
'obj':'#rotate',
'angle':[[0,60],[60,120],[120,180],[180,240],[240,300],[300,360]],
'num':6,
'offsetAlw':3,
'duration':5000,
'turnNum':5,
'parmIndex':'index',
'parmText':'text'
}
function ajaxG(){
var result = null;
$.ajax({
type: 'GET',
url: 'reword.php',
data: '',
async:false,
dataType:'json',
error:function(){
alert('抽奖失败');
},
success: function(data){
result = data;
}
});
return result;
}
$(function(){
lottery.start(function(){
if(!lottery.switchW){return true;}
else{
lottery.switchW = false;
var s = ajaxG();
var index = s.reward;//奖品编号
var text = s.text;//奖品名称
var obj = '{"'+ lottery.config['parmIndex'] +'":'+ index +',"'+ lottery.config['parmText'] +'":"'+ text +'"}';
obj = $.parseJSON(obj);
lottery.zhenscroll(obj,function(){
alert(text);
});
}
});
});
jQueryRotate 转盘抽奖代码实现的更多相关文章
- javascript 转盘抽奖代码和计数器代码
要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下 看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究... 效果预览: 一.模拟抽奖的实 ...
- jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: ? 1 2 3 4 5 6 7 8 9 10 ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
- 用jQuery和PHP来实现转盘抽奖程序
准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div cl ...
- jquery——九宫格大转盘抽奖
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...
- 纯CSS3大转盘抽奖（响应式、可配置）
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...
- web：转盘抽奖
移动web:转盘抽奖(幸运大转盘) 为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转 ...
- 移动web：转盘抽奖(幸运大转盘)
为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...
- css3转盘抽奖
做到一个活动,需要转盘抽奖,于是想到使用css3的动画效果,其中主要包含transition的动画过渡,transform的rotate的旋转效果,在这里只用到2d的旋转, 特别强调的是,因为需要和后 ...
随机推荐
- 分布式中使用Redis实现Session共享(转)
上一篇介绍了如何使用nginx+iis部署一个简单的分布式系统,文章结尾留下了几个问题,其中一个是"如何解决多站点下Session共享".这篇文章将会介绍如何使用Redis,下一篇 ...
- ASP.NET Identity
使用ASP.NET Identity实现基于声明的授权 阅读目录 走进声明的世界 创建并使用声明 基于声明的授权 使用第三方来身份验证 小节 在这篇文章中,我将继续ASP.NET Identity 之 ...
- Struts2_1_struts2建立一个执行环境
1)最低需要进口jar包: commons-fileupload-1.2.1.jar.commons-logging-1.0.4.jar. freemarker-2.3.15.jar.ognl-2.7 ...
- 数据存储（两）--SAX发动机XML记忆（附Demo）
Android SDK支撑SAX读取技术XML,SAX通过连续的读取方式来处理XML文件.这要求每个读数XML对应的事件触发,以处理该节点的文件的节点.以下是基于一个例子来告诉SAX使用: publi ...
- 在InstallShield中发布单一的Setup.exe文件
原文:在InstallShield中发布单一的Setup.exe文件 InstallShield默认的Release模式下,生成了一个setup.exe文件,一个msi文件,以及一些其它的杂项文件. ...
- poj 1328 Radar Installation (简单的贪心)
Radar Installation Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 42925 Accepted: 94 ...
- Spring搭建MVC WEB项目[转]
原文链接:http://blog.csdn.net/initphp/article/details/8208349 1.创建一个web项目 2.假设,我们已经安装完毕Spring所需要的依赖包,以及一 ...
- Matlab图像处理系列4———傅立叶变换和反变换的图像
注意:这一系列实验的图像处理程序,使用Matlab实现最重要的图像处理算法 1.Fourier兑换 (1)频域增强 除了在空间域内能够加工处理图像以外,我们还能够将图像变换到其它空间后进行处理.这些方 ...
- zabbix-agent TIME_WAIT 过多
一.系统环境 操作系统: Centos 6.4 64bit zabbix-agent 版本: Zabbix agent v2.2.7 (revision 50148) (24 October 2014 ...
- kobox ： key_waitqueue.c -v1 如何内核线程，如何使用等待队列
平台:TQ2440 按键驱动 (1)在init中创建一个内核线程作为等待队列的处理函数,该内核线程是一个while(1)死循环,一直检測等待队列的触发条件 DECLARE_WAIT_QUEUE_HEA ...