jquery.rotate插件实现转盘抽奖示例

css代码：

.draw-out{width:400px;height:400px;margin:30px auto;position:relative}
.draw-bottom{width:400px;height:400px;position:relative}
.draw-bottom section{width:400px;height:1px;background:#d6d6d6;position:absolute;top:200px;left:0}
.draw-bottom section.s2{
transform:rotateZ(60deg);
-webkit-transform:rotateZ(60deg);
-moz-transform:rotateZ(60deg);
-o-transform:rotateZ(60deg);
}
.draw-bottom section.s3{
transform:rotateZ(120deg);
-webkit-transform:rotateZ(120deg);
-moz-transform:rotateZ(120deg);
-o-transform:rotateZ(120deg);
}
.draw-bottom p{position:absolute;}
.draw-bottom p.p1{top:105px;left:300px}
.draw-bottom p.p2{top:240px;left:300px}
.draw-bottom p.p3{top:310px;left:170px}
.draw-bottom p.p4{top:240px;left:60px}
.draw-bottom p.p5{top:105px;left:60px}
.draw-bottom p.p6{top:30px;left:170px}

.draw{width:400px;height:400px;border:2px solid #E17F27;border-radius:200px;position:absolute;top:0}
.draw-in{width:80px;height:80px;padding:1px;margin:157px 157px}
.draw-in div{background:#E17F27;width:40px;height:40px;border-radius:33px;position:relative;margin:20px 20px}
.draw-in div .circle{display:block;width:0;height:0;border:10px solid transparent;border-bottom:40px solid #E17F27;position:absolute;left:10px;top:-44px}
.btn{display:block;margin:100px auto;width:100px;height:30px;border-radius:6px;background:#0ABF5D;color:#fff;text-align:center;line-height:30px;text-decoration:none}
.result p{color:#c00}

html代码：

<div class="draw-out">
   <div class="draw-bottom">
       <section class="s1"></section>
       <section class="s2"></section>
       <section class="s3"></section>
       <p class="p1">一等奖</p>
       <p class="p2">二等奖</p>
       <p class="p3">三等奖</p>
       <p class="p4">四等奖</p>
       <p class="p5">五等奖</p>
       <p class="p6">六等奖</p>
   </div>
   <div class="draw">
     <div class="draw-in">
       <div><em class="circle"></em></div>
     </div>
   </div>
</div>
<a href="javascript:void(0)" class="btn">来一下</a>
<div class="result"></div>

js代码：

<script type="text/javascript" src="/static/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/jquery.rotate.min.js"></script>
<script type="text/javascript">
   $(function(){
    var orignal_deg=-30;
    var last_deg=0;
     $('.btn').on('click',function(){
    
        $.post('result.php',function(res){
          var response=JSON.parse(res);          
          var rand=Math.ceil(Math.random()*10);
          //$rand_deg随机度数 只能在6-54
          if(rand==10){
              var $rand_deg=9*6;
          }else{
              var $rand_deg=rand*6;
          }

          var $curr_deg=360-(60*(response.status+1))+$rand_deg;
          var deg=orignal_deg+4*360-last_deg+$curr_deg;
          
           $('.draw-bottom').rotate({
              duration: 4000,
              angle:orignal_deg, 
              animateTo:deg,
              callback: rotation_res
           });

           function rotation_res(){
              $('.result').append('<p>'+response.msg+'</p>');
              console.log('您转了'+$curr_deg+'度！');
              orignal_deg=deg;
              last_deg=$curr_deg;
           };
           
        });
     });
   });
</script>

demo示例：test.ixiewei.com/luck-draw/index3.php