感恩节大转盘

日期： 2019-12-02 分类：个人收藏 367次阅读
<!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
    }

    .box {
        position: relative;
    }

    .round {
        position: absolute;
        top: 26%;
        width: 100%;
        text-align: center;
    }

    .turnImg {
        width: 80%;
        /* 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;
    }

    .boximg {
        width: 100%;
        height: 100%;
    }
</style>

<body>

    <div class="box">
        <img class="boximg" src="https://sucai.suoluomei.cn/sucai_zs/images/20191202151352-191202151321.png" alt="">
        <div class="round">
            <img class="turnImg" src="https://sucai.suoluomei.cn/sucai_zs/images/20191202151641-11151611.png" alt="" />
            <div class="begin">
                <img src="https://sucai.suoluomei.cn/sucai_zs/images/20191202155232-91202154753.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">11111</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 = 1//选中的奖品地址是需要后台传给你
                var part = 10  //奖品的总个数
                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>
除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog
标签：JQuery
上一篇：我用Python破解了同事加密的压缩包
下一篇： C++ 流插入和流提取运算符的重载