h5移动端转盘

最新推荐文章于 2019-12-02 16:10:32 发布

hy3528

最新推荐文章于 2019-12-02 16:10:32 发布

阅读量730

点赞数

分类专栏： html JQuery

本文链接：https://blog.csdn.net/hy3528/article/details/103347856

版权

html 同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

JQuery

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>大转盘抽奖</title>
</head>
<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%;
    }

    .popup-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        display: none;
        background: rgba(0, 0, 0, 0.5);

    }

    .popups {
        position: relative;
        width: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .popup-img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }

    .define {
        position: absolute;
        left: 0;
        bottom: 5%;
        font-size: 1.2rem;
        width: 100%;
        text-align: center;
    }

    .zhongjianp {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 20%;
        color: #fff;
        font-size: 1rem;
    }
</style>

<body>
    <div class="box">
        <div class="round">
            <img class="turnImg" src="https://sucai.suoluomei.cn/sucai_zs/images/20190926090636-1.png" alt="" />
            <div class="begin">
                <img src="https://sucai.suoluomei.cn/sucai_zs/images/20190924162756-kaishiaa.png" alt="" />
            </div>
        </div>
        <!-- 中奖弹框 -->
        <div class="popup-box">
            <div class="popups">
                <img class="popup-img" src="https://sucai.suoluomei.cn/sucai_zs/images/20190925151420-1.jpg" />
                <p class="zhongjianp"></p>
                <div class="define">确定</div>
            </div>
        </div>
    </div>
</body>

</html>

<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js "></script>
<script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.min.js"></script>
<script>
    $(document).ready(function () {

        var fandou = true
        //点击抽奖
        $(".begin").click(function () {
            if (fandou) {
                fandou = false   //设置为false防止再次点击触发此事件
                var math = Math.floor(Math.random() * 10);
                var sectorId = math//选中的奖品地址是需要后台传给你
                var part = 14  //奖品的总个数
                var defaultRotate = 1800   //一圈360度，旋转5圈
                var setRotate = (360 / part) * sectorId - (360 / part) / 2 //计算定位到指定商品在商品的中间
                var allRotate = defaultRotate + setRotate //总旋转度数
                $('.turnImg').velocity({    //图片旋转
                    rotateZ: -allRotate + 'deg'
                }, {
                    duration: 3000, //旋转的时间
                    complete: function (ele) {
                        $('.popup-box').css("display", "block") //中奖弹窗
                        fandou = true       //设置为true时可以点击触发此事件
                    },
                })
            }

        })
        //弹窗隐藏，页面重新加载
        $(".popup-box").click(function () {
            $('.popup-box').css("display", "none")
            location.reload()
        })

    })
</script>