之前做了一个幸运大抽奖的例子《幸运大转盘》

其实现思路是：点击抽奖-》后台返回是否满足抽奖资格-》满足则开始转动圆盘（否则退出）-》转动...等待后台返回中奖码（这时候转盘会无止境的转动，直到后台返回中奖码）-》转盘减速直到指针指向中奖号码-》转盘停止，结束抽奖并执行回调

其动画原理是用js快速的改变#D-body的style属性来达到转动的效果，CSS3的transform:rotate(*deg)，快速的改变deg的值。

但是：这样做效果是实现了，但是性能太低了，会有卡顿不流畅的现象，因为浏览器要不停的渲染以达到转动效果。

于是：当初想了一个办法，就是把#D-body里的元素生成一张base64的图片，对图片进行转动。这样做稍微没有卡顿的那么厉害，但是生成的图片不清晰而且有轻微的位移和像素错位的现象，再后来就被搁置了...

今天再翻出来整了一下，发现之前的思路有点问题。

重新理了一下思路是：点击抽奖-》后台一次返回是否满足抽奖资格和中奖号码（不满足则退出）-》转盘执行动画指向中奖号码-》转盘停止，结束抽奖并执行回调

这次不用频繁的去改变#D-body的style，这次用的是CSS3自带的动画transition，这样做的好处是浏览器只渲染一次动效，动画效果也流畅，而且也不用生成图片降低质量。

具体代码：

<script type="text/javascript">
// $.fn.dzpPlus(sum,fun)
// sum:转盘格子数量(int)，建议传3~6,从前面开始取，满足条件后会移除其余项
// fun:执行函数，start用来控制动画是否执行，finish来停止动画，code表示中奖码（需要与转盘格子的序号对应），callback是自定义回调。之所以要分开start和finish分别调用是因为我抽奖人员名单是A接口中奖的接口是B接口

//中奖名单滚动
$("#gun").gun();

//抽奖
$("#activity").dzpPlus(6,function(start,finish){
    var n = Math.round(Math.random()*5+1);
    //模拟ajax获取用户数据，判断权限
    setTimeout(function(){
        //tip("准备开始啦")
        start(1);
        //start(ready)
        //ready：必须，1启动抽奖，0不启动
        finish({
            "code":n,//中奖码（需要与转盘格子的序号对应）
            "callback":function(){
                //自定义回调
                tip("你中的是"+n+"号奖品")
            },
        });
    },100);
});
</script>

后续如果发现问题再继续优化。