大转盘可连续抽奖

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>jqueryrotate积分抽奖效果演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ::-webkit-scrollbar {
            display: none
        }

        .round {
            position: relative;
        }

        .turnImg {
            width: 100%;
            height: 100%;
        }

        .begin {
            position: absolute;
            width: 13%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .begin img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div class="round">
    <img class="turnImg" src="http://sucai.suoluomei.cn/sucai_zs/images/20190926090636-1.png" alt="" />
    <div class="begin">
        <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190924162756-kaishiaa.png" alt="" />
    </div>
</div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js "></script>
<script src="https://cdn.suoluomei.com/common/js2.0/jquery.rotate/jquery.rotate.min.js"></script>
<script>
    $(function () {
        var flog = true
        $(".round").rotate({
            bind: {
                click: function () {
                    if (flog) {
                        flog = false
                        var math = Math.floor(Math.random() * 10);
                        var sectorId = 2 //选中的奖品地址是需要后台传给你
                        var part = 14  //奖品的总个数
                        var defaultRotate = 1800   //一圈360度，旋转5圈
                        var setRotate = (360 / part) * sectorId - (360 / part) / 2 //计算定位到指定商品在商品的中间
                        var allRotate = defaultRotate + setRotate //总旋转度数
                        $('.turnImg').rotate({
                            duration: 10000,
                            angle: 0,
                            animateTo: allRotate,
                            callback: function () {
                                flog = true
                                console.log($('.turnImg')[0].style.transform)
                            }
                        })
                    }
                }
            }
        })
    })
</script>

</html>
站内首发文章
hql1024
发布了151 篇原创文章 · 获赞 1 · 访问量 2765
私信关注
大转盘可连续抽奖

猜你喜欢
