抽奖转盘

最新推荐文章于 2022-11-08 20:30:00 发布

qq_31127787

最新推荐文章于 2022-11-08 20:30:00 发布

阅读量243

点赞数

分类专栏：抽奖大转盘抽奖文章标签： jquery html javascript

本文链接：https://blog.youkuaiyun.com/qq_31127787/article/details/88975292

版权

抽奖同时被 2 个专栏收录

1 篇文章

订阅专栏

大转盘抽奖

1 篇文章

订阅专栏

js抽奖转盘插件（随手写的一个demo）

在这里插入图片描述

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../lib/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../js/prize-2.0.js"></script>
    <style>
        .container{
            margin: 10px 200px;
        }
        .container .prize{
            width: 500px;
            height: 400px;
            margin: auto;
        }
        .left{
            float: left;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="prize">

    </div>
    <div class="btn-msg">
        <div class="left"><button>开始</button></div>
        <div class="left" style="margin-left: 20px">
           获奖编号为：<span id="prize-num"></span>
        </div>
    </div>
</div>
<script type="text/javascript">


    var list = [];
    for (var i=1;i<20;i++){
        list.push({title:i,ratio:0.1,img:"../img/"+i%5+".jpg"});
    }
    var option = {
        isAuto:false,
        emptyBlock:{
            title:"再接再厉",
            img:""
        },
        repeat:{
            isOpen:false,//是否开启可重复中奖
            style:{
                background:"red",
                transform:"rotate(7deg)"
            }
        },
        tooltip:function (data) {
//            console.log($(this))
        },
        activeStyle:{
//            background:'url(../img/0.active.png)',
            border: "1px solid red"
//            transform:"rotate(7deg)"
        },
        series:{
            data:list,
            style:{
//                background:function (data) {
//                    return 'url('+data.img+')';
//                },
                width:"78px",
                height:"60px",
                border: "1px solid yellow" //等等自己追加样式
            }
        }
    }
    var p = new Prize($(".prize"),option);
    $(".btn-msg button").click(function () {
        this.disabled = true;
        var _this = this;
        p.beginExe(function (dom,data) {
//            console.log(data)
            $("#prize-num").append(data.title+",")
            _this.disabled = false;
        });
    });
</script>
</body>
</html>

prize.js 下载地址