[jQuery插件] jqueryrotate：抽奖转盘

下载地址：http://www.dowebok.com/148.html

第一步：引入js文件

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.rotate.min.js"></script>

第二步：编写html结构代码

<!--转盘层开始-->
<div class="wheel">
    <button id="plateBtn" class="btn" title="开始抽奖">开始抽奖</button>
</div>
<!--转盘层结束-->

<!--获奖信息弹层开始-->
<div id="result">
    <div class="dialog">
        <p id="resultTxt"></p>
        <a id="resultBtn" href="javascript:" title="关闭">关闭</a>
    </div>
</div>
<!--获奖信息弹层结束-->

第三步：写入启动js代码

<script>
$(function(){
    var $plateBtn = $('#plateBtn');
    var $result = $('#result');
    var $resultTxt = $('#resultTxt');
    var $resultBtn = $('#resultBtn');

    $plateBtn.click(function(){
        $plateBtn.attr("disabled",true); //防止按钮多次被点击
        var data = [0, 1, 2, 3, 4, 5, 6, 7];
        data = data[Math.floor(Math.random()*data.length)];
        switch(data){
            case 1: 
                rotateFunc(1,69,'恭喜你抽中了<br><em>奇迹鼠标垫</em>');
                break;
            case 2: 
                rotateFunc(2,114,'恭喜你抽中了<br><em>开学大礼包</em>');
                break;
            case 3: 
                rotateFunc(3,159,'恭喜你抽中了<br><em>小米体重称</em>');
                break;
            case 4: 
                rotateFunc(4,204,'恭喜你抽中了<br><em>豪气新人大礼包</em>');
                break;
            case 5: 
                rotateFunc(5,249,'恭喜你抽中了<br><em>奇迹U盘</em>');
                break;
            case 6: 
                rotateFunc(6,294,'恭喜你抽中了<br><em>霸气新人大礼包</em>');
                break;
            case 7: 
                rotateFunc(7,339,'恭喜你抽中了<br><em>奇迹抱枕</em>');
                break;
            default:
                rotateFunc(0,24,'恭喜你抽中了<br><em>至尊新人大礼包</em>');
        }
    });

    var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度
        $plateBtn.stopRotate();
        $plateBtn.rotate({
            angle: 0,
            duration: 5000,
            animateTo: angle + 1440,  //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
            callback: function(){
                $resultTxt.html(text);
                $result.show();
            }
        });
    };

    $resultBtn.click(function(){
        $result.hide();
        $plateBtn.attr("disabled",false); //使按钮可以再次被点击
    });
});
</script>

说明：转盘奖品分为8等分，每一份的角度是45度，指针度数要减去24度，因为要停在中间位置。