代码如下：
例子兼容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);
});
}
});
});