JS利用CSS3 transform rotate 实现旋转转盘或背景（大转盘抽奖） 阿星小栈

最近需要做一个旋转转盘抽奖的小组件，初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值，来达到转动效果。

使元素围绕中心根据角度偏转，在元素的transform属性中可以这样写：

transform:rotate(30deg);//偏转30度  
-moz-transform:rotate(30deg);//兼容Firefox及Opera  
-o-transform:rotate(30deg);  

关于transform的详细介绍可以看 这里 。

具体的思路是：我在转盘中计划了8个奖项，因此平均每个奖项在盘中所占角度为45度。指针位置固定于任意奖项正中1/2处（这里假设为正北方向)。setTimeout间隔时间不断增加偏转，以200次为例，设每次增加角度为amount=18度，最后旋转结果为总共走了3600度（10圈）回到原位。于此通过控制amount的数量变化控制奖项(每增减45/200就能停到下/上一奖项上)。

旋转中的快慢效果，可以通过设置不同阶段amount的缩减/增加比例实现，只需使增减比例相同时间程度内互相对称即可。

具体的操作方法我是这样写的(用到了jQuery更加方便操作元素)：

function setDegree($obj,deg){
    $obj.css({
        'transform':     'rotate('+deg+'deg)',
        '-moz-transform':'rotate('+deg+'deg)',
        '-o-transform':  'rotate('+deg+'deg)'
    });
}

function rotate(){

    var $tar = $('#rotatebg'),
    i,
    cnt = 100,                          //用做ratio的索引(10-29)
    total = 0,                          //记录上一次的变化结果
    ratio = [],                         //存放角度的变化比例，制造快慢过渡效果
    offset = <?php echo $prize; ?>,     //0-7,代表需要停到的奖项,由后端传入
    amount = 18 - ( 0.225*offset ),     //每次每多出45/200=0.225度,200次就多偏转45度
    result = <?php echo $prizeName; ?>; //奖项名称用于显示,由后端传入

    ratio[1] = [0.2, 0.4, 0.6, 0.8, 1, 1, 1.2, 1.4, 1.6, 1.8];
    ratio[2] = [1.8, 1.6, 1.4, 1.2, 1, 1, 0.8, 0.6, 0.4, 0.2];

    for(i=0;i<200;i++){
            //设计为200次50ms的间隔，10s出结果感觉比较好
        setTimeout(function(){
                    //计算每次偏转增量，对应阶段的增减比例最终造成快慢变化
            var deg = amount*( ratio[ String(cnt).substr(0,1) ][ String(cnt).substr(1,1) ] );
            setDegree($tar,deg+total);//改变偏转
            total += deg;//记录
            cnt++;//依据次数用作ratio的索引，这里用到了闭包不能使用i
        },i*50);
    }
    setTimeout(function(){
            alert( result );//完成
    },200*50+500);
}

//绑定事件，点击指针开始
var Flag = false;
$(function(){
    $("#needle").click(function(){
        if(!Flag){
            Flag = true;
            rotate();
        }
    });
});

值得一提的是，在200次的循环和setTimeout中造成了闭包。因此虽然实际第一个setTimeout开始时，for语句已经结束了(此时i已为200，不能作为cnt使用)，但是上级变量的值(cnt及total)依然传递和留存到了每次动作中，使其可以被操作。这也是闭包的妙处。

关于抽奖的流程，奖项为后端运行得出传入，使逻辑和表现分开，转盘这一过程实际只承担了结果的表现。这样设计可以防止结果被恶意更改，安全性更有保障。

实际中再往下完善的话，可以把具体的参数都改由后端传入，使得前后统一更方便，另外还可在点击转盘开转时，Ajax异步回传确认动作，作为判定奖项生效的依据，后再进入旋转。这里主要分享前端部分的过程，具体的流程就不再敖述了。

实际效果请移步 小样  。

http://blog.csdn.net/as66t/article/details/14128683