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的旋转, 特别强调的是,因为需要和后 ...
随机推荐
- 使用log4j日志-配置载入问题
1.在eclipse中,把log4j.properties放在类路径下,在项目启动时就会自己主动载入. 2.在idea中.把log4j.properties放在类路径下,可是项目启动时不能直接载入(原 ...
- 解决Activity启动黑屏和设置android:windowIsTranslucent不兼容activity切换动画的问题
在该项目中遇到开Activity之后,黑屏问题,解决的办法是在网上通过设置发现theme和style特性,可以实现. http://www.cnblogs.com/sunzn/p/3407078.ht ...
- （大数据工程师学习路径）第一步 Linux 基础入门----目录结构及文件基本操作
Linux 目录结构及文件基本操作 介绍 1.Linux 的文件组织目录结构. 2.相对路径和绝对路径. 3.对文件的移动.复制.重命名.编辑等操作. 一.Linux 目录结构 在讲 Linux 目录 ...
- SharePoint 2010 升级到2013时间 为了确保用户可以连接，但无法改变升级数据
SharePoint 2010 升级到2013时间 为了确保用户可以连接,但无法改变升级数据 我总结的步骤 红色请注意它们的含义. 步骤1:连接到SQL DBS 上的SharePoint 2010数据 ...
- UIBarButtonItem 小记边
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuZ3poZW4xOTkwMDcwMQ==/font/5a6L5L2T/fontsize/400/ ...
- WinForm LED循环显示信息，使用定时器Threading.Timer
原文:WinForm LED循环显示信息,使用定时器Threading.Timer 这里用一个示例来演示timer如何使用.示例:LED屏幕显示描述:这个示例其实很简单,LED屏幕上显示3个信息: ...
- 第12章 代理模式（Proxy Pattern）
原文 第12章 代理模式(Proxy Pattern) 代理模式 概述: 在软件系统中,有些对象有时候由于跨越网络或者其他的障碍,而不能够或者不想直接访问另一个对象,如果直接访问会给系统带来不必要 ...
- 第10章 外观模式（Façade Pattern）
原文 第10章 外观模式(Façade Pattern) 概述: 在软件开发系统中,客户程序经常会与复杂系统的内部子系统之间产生耦合,而导致客户程序随着子系统的变化而变化.那么如何简化客户程序 ...
- 在四川大学的第二个冠军游戏在线编程：Peter的X
四川大学线下编程比赛第二题:Peter的X 公布公司: 有 效 期: CSDN 2014-09-27至2015-09-26 难 度 等 级: 答 题 时 长: 编程语言要求: 120分钟 C C++ ...
- ext panel 它们的定义图像刷新
从管理发展的近期回报.事实上,它采取了一些努力,以适应,应对来自另一个角度的问题只.外观似良好的效果.阿土,项目用到了EXT js.百度大神里面没找到一个合适的图片组件.自己写了个能够刷新的图片组件. ...