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的旋转, 特别强调的是,因为需要和后 ...
随机推荐
- UVa 10285 - Longest Run on a Snowboard
称号:给你一个二维矩阵,找到一个点.每一个可以移动到的位置相邻的上下,求最长单调路径. 分析:贪婪,dp.搜索. 这个问题是一个小样本,我们该怎么办. 这里使用贪心算法: 首先.将全部点依照权值排序( ...
- Android采用Volley具体的例子展示完整的异步加载数据(一)
MainActivity例如下列: package cc.cn; import java.util.HashMap; import org.json.JSONObject; import androi ...
- 配置静态监听解决ORA-12514错误的案例（转）
今天做Linux下DG配置的时候,遇到一个现象,tnsname.ora文件配置都正常,tnsping也正常,监听也正常,但是仍然报ORA-12514错误: SQL> set lin 130 ...
- 【通过做专题研习Android】知识点：SharedPreferences
Ⅰ. 一个简短的引论 很多时候我们需要开发软件,为用户提供软件参数设置功能,比如,我们经常使用 QQ.用户可以设置自己是否同意加入一个陌生人为好友.对于软件的配置参数的存储,假设window採用ini ...
- C# 使用 Code Snippet 简化 Coding
在开发的项目的时候,你是否经常遇到需要重复编写一些类似的代码,比如是否经常会使用 for.foreach ? 在编写这两个循环语句的时候,你是一个字符一个字符敲还是使用 Visual Studio 提 ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(13)-权限设计
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(13)-权限设计 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据 ...
- Oracle内存管理（五）
[深度分析--eygle]学习笔记 1.4. 2其他内存组件 Large Pool-大池是SGA的一个可选组件,通经常使用于共享server模式(MTS). 并行计算或 RMAN的备份恢复等操作. J ...
- 【Leetcode】Sort List (Sorting)
这个问题需要与归并排序排两个名单,基本思路分为切割与合并 合并后的代码Merge Two Sorted List里已经讲得非常清楚了. 所以这里直接给出代码. public ListNode merg ...
- C# Parse和Convert的区别分析（转）
大家都知道在进行类型转换的时候有连个方法供我们使用就是Convert.to和*.Parse,但是疑问就是什么时候用C 什么时候用P 通俗的解释大家都知道: Convert 用来转换继承自object类 ...
- 各种oracle参数查询语句
各种oracle参数查询语句 1.show parameter:--显示各个系统参数配置 2.select * from v$parameter;--显示各个系统参数配置 2.show paramet ...