/code/1153.html
网上转盘抽奖程序大多是flash完成的，而本文使用jQuery和PHP来实现转盘抽奖程序。
若是想看更多js特效、网站源码、 js教程请访问 /js 还有演示DEMO，最主要是可以免费下载。
首先要准备两张图片，即圆盘和指针，然后我们在#disk来放置圆盘背景图片，在css中控制，用#start来放置指针图片start.png。<divid="disk"></div><divid="start"><imgsrc="images/start.png"id="startbtn"alt="转盘开启"/></div>CSS指针和圆盘样式如下：#disk{width:417px;height:417px;background:url(images/disk.jpg)no-repeat}#start{width:163px;height:320px;position:absolute;top:46px;left:130px;}#startimg{cursor:pointer}接着我们引入jquery.js、旋转插件jQueryRotate.2.2.js及动画easing插件jquery.easing.min.js。easing教程我们已经讲过了，jQueryEasing动画插件。<scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript"src="jQueryRotate.2.2.js"></script><scripttype="text/javascript"src="jquery.easing.min.js"></script>最后通过jQueryRotate.js旋转插件，我们让指针转起来。$(function(){$("#startbtn").rotate({bind:{click:function(){varrandom=Math.floor(Math.random()*360);//生成随机数$(this).rotate({duration:3000,//转动时间间隔（速度单位ms）angle:0,//指针开始角度animateTo:3600+random,//转动角度，当转动角度到达3600+random度时停止转动。easing:$.easing.easeOutSine,//easing动画效果callback:function(){//回调函数alert('恭喜您，中奖了！');}});}}});});下面介绍使用PHP来控制抽奖几率，以及完成两者之间的交互：首先，在ajax.php中创建一个奖项对应角度和中奖几率二维数组：$prize_arr=array('0'=>array('id'=>1,'min'=>1,'max'=>29,'prize'=>'一等奖','v'=>1),'1'=>array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等奖','v'=>2),'2'=>array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等奖','v'=>5),'3'=>array('id'=>4,'min'=>182,'max'=>208,'prize'=>'四等奖','v'=>7),'4'=>array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等奖','v'=>10),'5'=>array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等奖','v'=>25),'6'=>array('id'=>7,'min'=>array(32,92,152,212,272,332),'max'=>array(58,118,178,238,298,358),'prize'=>'七等奖','v'=>50)//min数组表示每个个奖项对应的最小角度max表示最大角度//prize表示奖项内容，v表示中奖几率(若数组中七个奖项的v的总和为100，如果v的值为1，则代表中奖几率为1%，依此类推));中奖概率方法我们之前在jQuery砸金蛋_PHP砸金蛋讲过，代码如下functiongetRand($proArr){$data='';$proSum=array_sum($proArr);//概率数组的总概率精度foreach($proArras$k=>$v){//概率数组循环$randNum=mt_rand(1,$proSum);if($randNum<=$v){$data=$k;break;}else{$proSum-=$v;}}unset($proArr);return$data;}函数getRand()会根据数组中设置的几率计算出符合条件的id，我们可以接着调用getRand()。foreach($prize_arras$v){$arr[$v['id']]=$v['v'];}$prize_id=getRand($arr);//根据概率获取奖项id$res=$prize_arr[$prize_id-1];//中奖项$min=$res['min'];$max=$res['max'];if($res['id']==7){//七等奖$i=mt_rand(0,5);$data['angle']=mt_rand($min[$i],$max[$i]);}else{$data['angle']=mt_rand($min,$max);//随机生成一个角度}$data['prize']=$res['prize'];echojson_encode($data);接着点击”开始抽奖“按钮，便会向后台ajax.php请求并返回奖项信息，这时指针开始转动，指针最终停留位置是由ajax.php返回值angle来决定的，这样我们就可以控制概率和前端指针转动停留位置。代码如下：$(function(){$("#startbtn").click(function(){lottery();});});functionlottery(){$.ajax({type:'POST',url:'ajax.php',dataType:'json',cache:false,error:function(){alert('Sorry，出错了！');returnfalse;},success:function(json){$("#startbtn").unbind('click').css("cursor","default");varangle=json.angle;//指针角度varprize=json.prize;//中奖奖项标题$("#startbtn").rotate({duration:3000,//转动时间msangle:0,//从0度开始animateTo:3600+angle,//转动角度easing:$.easing.easeOutSine,//easing扩展动画效果callback:function(){varresulte=confirm('恭喜您中得'+prize+'\n想要继续吗？');if(resulte){//若是点击确定，继续抽奖lottery();}}});}});}复制代码
查看该特效演示及免费下载，请访问/js/19.html
