可以看到1-6等奖都只有1个,7等奖有6个。指针默认指向上图位置,记为0°。 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°。 为了防止指针指着相邻两个将向之间的线,所以记为一等奖的最小角度为1°,最大角度为29°。同理可找出其他奖
可以看到1-6等奖都只有1个 ,7等奖有6个。指针默认指向上图位置,记为0°。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="幸运大转盘,cnsecer.com" /> <meta name="description" content="幸运大转盘" /> <title>幸运大转盘</title> <style type="text/css"> .demo{width:417px; height:417px; position:relative; margin:50px auto} #disk{width:417px; height:417px; background:url(__STATIC__/images/disk.jpg) no-repeat} #start{width:163px; height:320px; position:absolute; top:46px; left:130px;} #start img{cursor:pointer} </style> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="__STATIC__/js/jQueryRotate.2.2.js"></script> <script type="text/javascript" src="__STATIC__/js/jquery.easing.min.js"></script> <script type="text/javascript"> $(function(){ $("#startbtn").click(function(){ lottery(); }); }); function lottery(){ $.ajax({ type: 'POST', url: '{:U(\'game/run\')}', //提交地址 改为你自己的 dataType: 'json', cache: false, error: function(){ alert('出错了!'); return false; }, success:function(json){ $("#startbtn").unbind('click').css("cursor","default"); var a = json.angle; //角度 var p = json.prize; //奖项 $("#startbtn").rotate({ duration:3000, //转动时间 angle: 0, animateTo:1800+a, //转动角度 easing: $.easing.easeOutSine, callback: function(){ var con = confirm('恭喜你,中得'+p+'\n还要再来一次吗?'); if(con){ lottery(); }else{ return false; } } }); } }); } </script> </head> <body> <div id="main"> <div class="msg"></div> <div class="demo"> <div id="disk"></div> <div id="start"><img src="__STATIC__/images/start.png" id="startbtn" alt="PHP幸运大转盘源码,支持ThinkPHP" ></div> </div> </div> <div id="footer"> </div> </body> </html>