手机端源码下载地址：http://pan.baidu.com/s/1ntG1Sd7（我修改成了移动端自适应，微信访问可看到效果，但我没自己的站，只能你们自己实验了！）
昨天接到公司的一个项目是在微信端做一个抽奖转盘的效果，脑海里的第一个想法就是用CSS3动画来实现这个效果，但是一想到抽奖概率与转盘动画的关联性，还是去网上找了一套代码。
写在这里做一下代码的知识总结吧！
所需要用到的插件：jquery、jQueryRotate（负责控制元素转动的角度）、jquery.easing（负责元素转动时的动画效果调用）
<!--移动端的meta标签定义，在这里就不叙述了，有兴趣的可以问度娘了解下--> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> <meta name=”format-detection” content=”telephone=no” /> <meta http-equiv="X-UA-Compatible" content="IE=8"> <!--JS引入--> <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript" src="jQueryRotate.2.2.js"></script> <script type="text/javascript" src="jquery.easing.min.js"></script> <!--简单的html源码--> <div class="demo"> <img id="disk" src="disk.jpg" /> <img src="start.png" id="startbtn" class="start"> </div>
以上的基本需求满足后开始研究效果的实现
<script type="text/javascript"> $(function(){ $("#startbtn").click(function(){ lottery(); //给转盘的按钮绑定一个事件 }); }); function lottery(){ $.ajax({ //执行事件首先请求php（代码下面会贴出） type: 'POST', url: 'json.php', //请求PHP地址 dataType: 'json', //数据类型为json cache: false, //缓存：false error: function(){ //请求失败执行函数 alert('出错了！'); return false; }, success:function(json){ // 带入PHP返回的参数数组 $("#startbtn").unbind('click').css("cursor","default"); // 首先移除按钮可再次执行函数Click事件，至于CSS对于移动端没用，只是PC端一个UI效果罢了 var a = json.angle; // 定义角度 a = php数组.angle var p = json.prize; // 定义奖项文字 p = php数组.prize $("#startbtn").rotate({ // 执行jQueryRotate.js插件中的rotate方法 duration:3000, // 转动时间 angle: 0, // 起始角度 animateTo:1800+a, // 转动角度+a（为保证随机数a过小，转动立刻停止，将1800为基本转动角度） easing: $.easing.easeOutSine, // 执行jQuery.easing.min.js中定义的动画效果 callback: function(){ // 最后alert返回给用户信息 var con = confirm('恭喜你，中得'+p+' 还要再来一次吗？'); if(con){ lottery(); }else{ return false; } } }); } }); } </script>
接下来是PHP代码，笔者不懂PHP，只能把自己知道的理念备注下来，方便修改。
<?php $prize_arr = array( //建立一个二维数组 '0' => array('id'=>1,'min'=>1,'max'=>60,'prize'=>'一等奖','v'=>1), //根据数组的下标找到其中数组的信息 '1' => array('id'=>2,'min'=>61,'max'=>120,'prize'=>'二等奖','v'=>2), //min代表最小角度 max代表最大角度 转盘是以时钟六点方向为0度进行计算 '2' => array('id'=>3,'min'=>121,'max'=>180,'prize'=>'三等奖','v'=>5), //prize也就是js请求回来的变量 p '3' => array('id'=>4,'min'=>181,'max'=>240,'prize'=>'四等奖','v'=>7), '4' => array('id'=>5,'min'=>241,'max'=>300,'prize'=>'五等奖','v'=>10), '5' => array('id'=>6,'min'=>301,'max'=>360,'prize'=>'六等奖','v'=>25), ); foreach ($prize_arr as $key => $val) { $arr[$val['id']] = $val['v']; } $rid = getRand($arr); //根据概率获取奖项id s $res = $prize_arr[$rid-1]; //中奖项 $min = $res['min']; $max = $res['max']; $result['angle'] = mt_rand($min,$max); //随机从min与max之间 生成一个数值 $result['prize'] = $res['prize']; function getRand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 foreach ($proArr as $key => $proCur) { $randNum = mt_rand(1, $proSum); if ($randNum <= $proCur) { $result = $key; break; } else { $proSum -= $proCur; } } unset ($proArr); return $result; //返回计算后的 result['angle']数组中的值给JS计算 } echo json_encode($result); ?>
由于也是用的别人的代码，但是自己总结一下修改经验的话，我认为还是一个好的习惯，如果什么时候笔者也能自己写出来的话，那我会很高兴的。