基于jquery.rotate插件制作的红包新云大转盘抽奖示例演示

实现步骤

1、引入脚本依赖

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

2、HTML代码(部分)

<div class="rotary">
    <div class="rotary-pointer" id="rotaryPointer"></div>
    <div class="winning-list">
        <h3>新运中奖名单(模拟数据)</h3>
        <ul>
            <li>136****666</li>
            <li>136****666</li>
            ......
            <li>136****666</li>
        </ul>
    </div>
    <div class="alert" id="alert">
        <p id="alertMsg"></p>
        <a class="close" href="javascript:" id="alertCloseBtn" title="关闭">关闭</a>
    </div>
</div>

3、CSS样式（里边使用的图片资源可以到演示里边去下载）

    body{
        background:#21B384;
    }
    h1 {
        text-align: center;
    }

    .rotary {
        position: relative;
        width: 854px;
        height: 504px;
        margin: 0 auto;
        background: #d71f2e url(images/rotory-table.png);
    }

    .rotary-pointer {
        position: absolute;
        left: 181px;
        top: 104px;
        width: 294px;
        height: 294px;
        cursor: pointer;
        background-image: url(images/pointer.png);
    }

    .winning-list {
        position: absolute;
        right: 48px;
        top: 144px;
        width: 120px;
        height: 320px;
        overflow: hidden;
    }

    .winning-list h3 {
        display: none;
    }

    .winning-list ul {
        list-style-type: none;
        padding-left: 0px;
    }

    .winning-list li {
        height: 37px;
        font: 14px/37px "Microsoft Yahei";
        color: #ffea76;
        text-indent: 25px;
        background: url(images/user.png) 0 no-repeat;
    }

    .alert {
        display: none;
        position: absolute;
        left: 130px;
        top: 190px;
        width: 395px;
        height: 118px;
        background-color: rgba(0, 0, 0, 0.68);
        filter: alpha(opacity=88);
    }

    .alert  .close {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 25px;
        height: 25px;
        text-indent: -100px;
        background-image: url(images/close.png);
        overflow: hidden;
    }

    .alert p {
        padding: 45px 15px 0;
        font: 16px "Microsoft Yahei";
        color: #fff;
        text-align: center;
    }

    .alert strong {
        color: #ffea76;
        font-style: normal;
    }

4、JS(重点)

$(function() {
    $('#rotaryPointer').on("click",function(){
        var winNumArr = [0, 1, 2, 3, 4, 5, 6, 7];
        var winNum = winNumArr[Math.floor(Math.random() * winNumArr.length)];
        switch (winNum) {
            case 1:
                rotateMethod(1, 87, '恭喜您获得了 <strong>1</strong> 元代金券');
                break;
            case 2:
                rotateMethod(2, 43, '恭喜您获得了 <strong>5</strong> 元代金券');
                break;
            case 3:
                rotateMethod(3, 134, '恭喜您获得了 <strong>10</strong> 元代金券');
                break;
            case 4:
                rotateMethod(4, 177, '很遗憾，这次您未抽中奖，继续加油吧');
                break;
            case 5:
                rotateMethod(5, 223, '恭喜您获得了 <strong>20</strong> 元代金券');
                break;
            case 6:
                rotateMethod(6, 268, '恭喜您获得了 <strong>50</strong> 元代金券');
                break;
            case 7:
                rotateMethod(7, 316, '恭喜您获得了 <strong>30</strong> 元代金券');
                break;
            default:
                rotateMethod(0, 0, '很遗憾，这次您未抽中奖，继续加油吧');
        }
    });

    $('#alertCloseBtn').click(function() {
        $('#alert').hide();
    });
});

/**
     * winNum:抽中的奖项
     * angle:图片上各奖项对应的角度
     * text：结果，用于提示
     **/
function rotateMethod(winNum, angle, text){
    $('#rotaryPointer').stopRotate();
    $('#rotaryPointer').rotate({
        angle: 180,
        duration: 3000,
        animateTo: angle + 2160, //2160让指针固定旋转6圈
        callback: function() {
            $('#alertMsg').html(text);
            $('#alert').show();
            setTimeout(function(){$('#alert').hide();},3000);
        }
    });
}

这样就完成了jquery.rotate实现的辛运大转盘抽奖示例