jQuery大转盘抽奖插件


jQuery大转盘抽奖插件
jQuery大转盘抽奖插件以及大转盘抽奖等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/index.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/lib/anime.min.js"></script>
<script src="js/app/lottery.js"></script>

3. HTML代码

    <div class="box-lottery">
        <div class="lottery-wrap" style="transform: rotate(-45deg);">
            <span class="lottery-span1" data-id="8">
                <i>京东卡<br>10元</i><img src="img/lottery_01.png" alt="京东卡10">
            </span>
            <span class="lottery-span2" data-id="7">
                <i>京东卡<br>20元</i><img src="img/lottery_02.png" alt="京东卡20">
            </span>
            <span class="lottery-span3" data-id="6">
                <i>京东卡<br>50元</i><img src="img/lottery_03.png" alt="京东卡50">
            </span>
            <span class="lottery-span4" data-id="5">
                <i>京东卡<br>100元</i><img src="img/lottery_04.png" alt="京东卡100">
            </span>
            <span class="lottery-span5" data-id="1">
                <i>谢谢参与</i><img src="img/lottery_05.png" alt="谢谢参与">
            </span>
            <span class="lottery-span6" data-id="4">
                <i>京东卡<br>200元</i><img src="img/lottery_06.png" alt="京东卡200">
            </span>
            <span class="lottery-span7" data-id="3">
                <i>京东卡<br>500元</i><img src="img/lottery_07.png" alt="京东卡500">
            </span>
            <span class="lottery-span8" data-id="2">
                <i>iQOO Pro<br>手机</i><img src="img/lottery_08.png" alt="iQOO Pro">
            </span>
        </div>
        <a class="lottery-btn" href="javascript:void(0);"><i></i>立即抽奖</a>
    </div>
    <script>
        var Lottery = Turntable.create();
        $('.lottery-btn').on('click', function(){
            var num = Math.floor(Math.random() * 8);
            Lottery.start(num, function(index){
                alert($('span').eq(index).find('i').text());
                console.log('index', index, 'lottery-span', 'lottery-span'+(index+1));
            });
        });
    </script>

相关推荐

发表评论

相关文章