<divclass="lunck_draw_wrap"> <divclass="turnplate"style=" background-size:100%100%;"> <canvasclass="item"id="wheelcanvas"width="422px"height="422px"></canvas> <imgclass="pointer"style="top:0px; left:0px; width:100%; height:100%;"src="../images/chouzhang12.png"/> <imgclass="pointer"src="../images/hianji .png"/> </div> </div>
效果图：
点击事件执行代码：
$('.lunck_draw_wrap').delegate("img.pointer","click",function(){ if(turnplate.bRotate)return; turnplate.bRotate =!turnplate.bRotate; $.getJSON("../AJAX/lottery.ashx","",function(data){ //1090系统配置错误，1091用户未登陆或用户数据异常，1092用户剩余积分不足,1093未中奖 hideInput("code",data.code) if(data.code.toString()=="1090"){ iosalert("系统配置错误") }elseif(data.code.toString()=="1091"){ iosalert("用户未登陆或用户数据异常") }elseif(data.code.toString()=="1092"){ iosalert("用户剩余积分不足") }elseif(data.code.toString()=="1094"){ iosalert("超过每日抽奖次数") } else{ var upoint =0; upoint = parseInt($("#uPoint").html())- parseInt($("#sPoint").html()); $("#uPoint").html(upoint); if(data.isWin =='true'){ item = getArrayIndex(turnplate.restaraunts, data.name); rotateFn(item +1,"恭喜获得，"+ turnplate.restaraunts[item]); } else{ rotateFn(0,"恭喜获得优胜奖！"); } } }) });
上面的代码实现了基本上的逻辑，还需要一个转动转盘的方法来响应服务端传过来的结果：
//旋转转盘 item:奖品位置; txt：提示语; var rotateFn =function(item, txt){ //根据传进来的奖品序号 计算相应的弧度 var angles = item *(360/ turnplate.restaraunts.length)-(360/(turnplate.restaraunts.length *2)); if(angles <270){ angles =270- angles; }else{ angles =360- angles +270; } //强制停止转盘的转动 $('#wheelcanvas').stopRotate(); //调用转动方法，设置转动所需参数和回调函数 $('#wheelcanvas').rotate({ //起始角度 angle:0, //转动角度 +1800是为了多转几圈 animateTo: angles +1800, duration:8000, callback:function(){ iosSuccess(txt); turnplate.bRotate =!turnplate.bRotate; if($("#code").val()!="1093"){ delayLoad(getHttpPrefix +"graphicdetails.html?lukyid="+ $("#code").val()) } } }); };
好了 主要的功能代码都已分享完毕了，还有些工具方法不理解的，可以留言 我会补充进去的。