一个九宫格抽奖的轮子

在线demo

安装

NPM

npm i k-luckdraw -S

CDN

<script src="//unpkg.com/k-luckdraw/index.js"></script>

参数 options

var options = {
    id:'', //render 的dom的ID，必填***
    data: [], //奖品的数据，必填***
    index: -1, //当前转动到哪个位置，起点位置
    speed: 300,//初始转动速度
    times: 0,//转动次数
    cycle: 50,//转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize: -1,//中奖位置，必填***， 不然停不下来
    isBengin: false, //已经开始了，就不能进行第二次抽，
    callBack: null,//回调，轮子转完了得弹个什么框的
    autoLuck: false // 默认是否点中间的start 开始抽奖
}

var luck = new luckDraw(options)

options.data.item

var item = {
    title:'10万人民币',  //奖品的标题
    icon:'',  //奖品对应的图片
    index:'' //奖品序号
}
options.data = [...item...]

示例

<!-- html -->
<div id="luck-box"></div>

<!-- js -->
<script>
    var luck = new luckDraw({ id: 'luck-box', autoLuck: true, prize: 7 })
    // luck.start()  //开始
</script>

for vue

<template>
    <div id="luck-box"></div>
</template>        
<script>
import luckdraw from 'k-luckdraw'
export default { 
    mounted(){
        let luck = new luckdraw({id:'luck-box',prize: 5,autoLuck:true})
        //luck.start()
    }
}
<script>

demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>九宫格抽奖demo</title>
    <meta http-equiv="x-ua-compatible"
          content="ie=edge" />
    <meta data-n-head="true"
          name="viewport"
          content="width=device-width, initial-scale=1">

    <script src="index.js"></script>
    <style>
        .luck-box {
            width: 640px;
            height: 582px;
            margin: 50px auto;
            padding: 24px;
        }

        .luck-draw {
            width: 600px;
        }

        .luck-draw .luck-draw-item {
            height: 176px;
            width: 196px;
            background: linear-gradient(120deg, #ee614a, #ff6951);
            text-align: center;
            -webkit-box-sizing: border-box;
            margin: 0 2px 2px 0;
            font-size: 0;
            float: left;
        }

        .luck-draw .luck-draw-item:nth-child(2n) {
            background: linear-gradient(120deg, #db3f3f, #ed4444);
        }

        .luck-draw .luck-draw-start {
            background: url(start.jpg) no-repeat center center;
            background-size: contain;
            cursor: pointer;
        }

        .luck-draw .luck-draw-item-icon {
            width: 95%;
            margin: .3rem auto 0;
            height: 70%;
            display: inline-block;
        }

        .luck-draw .luck-draw-item-icon img {
            max-height: 90%;
            max-width: 100%;
            border-radius: 6px;
            margin: 18px 0;
            display: inline-block;
            background: #ffb4b4;
            width: 90px;
            height: 90px;
        }

        .luck-draw .luck-draw-item-name {
            color: #fff;
            padding-top: 8px;
            font-size: 16px;
            display: block;
        }

        .luck-draw .luck-draw-item-active {
            background: #ffb000 !important;
        }
    </style>
</head>

<body>
    <div id="luck-box"></div>
    <script>
        var luck = new luckDraw({ id: 'luck-box', autoLuck: true, prize: 7,callback:function(){ alert('中了一等奖')} })
        // luck.start()  //开始
    </script>
</body>

</html>

一个九宫格抽奖的轮子

一个九宫格抽奖的轮子

在线demo

安装

NPM

CDN

参数 options

options.data.item

示例

for vue

demo

猜你喜欢