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); }); } }); });
