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的旋转, 特别强调的是,因为需要和后 ...
随机推荐
- C# WinForm中实现CheckBox全选反选功能
今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...
- 中介模式和学习日记Effective C++
中介模式(Mediator):利用中介对象来封装一组对象交互.中保使对象并不需要显式地相互引用,使得松耦合,的交互. (1).中介者模式非常easy在系统中应用,也非常easy在系统中误用.当系统出现 ...
- JavaEE(24) - JAAS开发安全的应用
1. 安全域.角色和用户组 容器提供的两种安全性控制:声明式安全控制和编程式安全控制 安全域是指用户.用户组和ACL的逻辑集合.服务器支持的两种常用安全域:RDBMS安全域和文件系统安全域. 2. J ...
- PL/SQL编程(1) - 存储过程，函数以及参数
存储过程 PROCEDURE [schema.]name[( parameter[, parameter...] ) ] [AUTHID DEFINER | CURRENT_USER ] [ACCES ...
- web富客户端应用下，前端架构问题。
前言: 以前的工作大部分都是,前端做页面 稍微写几个js效果就算是 有复杂的效果 也没有涉及到 需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前 ...
- 管道通信（使用popen和pclose功能简单的控制管道）
函数原型: FILE *popen(const char * command ,const char *mode) int pclose(FILE * stream) 当心: 采用popen和pclo ...
- React.js终探（五）
在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="t ...
- ORACLE查看和更改的最大连接数
第一步,在cmd命令行,进入sqlplus 第二步骤,根据提示输入username与password 1. 视图processes和sessions参数 SQL> show paramet ...
- Xcode6为什么干掉pch（Precompile Prefix Header）&怎样加入pch文件
一直在用xcode6开发,但项目都是在xcode5上创建的,所以一直没注意到,xcode6居然干掉pch文件了. 为什么xcode6没有自己主动创建pch文件呢? 简单地看:我们在写项目的时候,大部分 ...
- ajax提交与上传文件同步
我们经常担心文件上传,最烦比,可以推断,我们上传的文件大小,格风格等等一系列的推理验证.所以,我们只能ajax提交验证.ajax异步提交太麻烦,我想太多的变化代码,事实上,我们使用JQuery当插件, ...