jQuery抽奖转盘(原创)

查看演示立即下载

插件描述：本插件可以帮助你，快速创建一个活动抽奖转盘，并提供旋转转盘的方法。插件基于jquery，使用canvas创建转盘。

发布时间：2018-3-16 0:16

用法

首先创建一个canvas

<canvas id="myCanvas" width="600" height="600">
   当前浏览器版本过低，请使用其他浏览器尝试
</canvas>

再引入jquery和插件js

1 2	`<script` `src="/"></script>` `<script` `src="/assets/myPlugin/turntable/turntable.js"></script>`

定义转盘参数及初始化

// 定义转盘奖品
var wheelSurf = $('#myCanvas').WheelSurf({
    list: list, // 奖品 列表，(必填)
    outerCircle: {
        color: '#df1e15' // 外圈颜色(可选)
    },
    innerCircle: {
        color: '#f4ad26' // 里圈颜色(可选)
    },
    dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
    disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色，默认7彩(可选)
    title: {
        color: '#5c1e08',
        font: '19px Arial'
    } // 奖品标题样式(可选)
})
// 初始化转盘
wheelSurf.init()

关键方法旋转转盘

// 转盘抽奖，
wheelSurf.lottery(旋转角度, function () {
})

API

方法	对象	参数	返回值
WheelSurf()	canvas的JQuery对象	@param {Object} options @param {Array} options.list 存储奖品的的列表，example [{1:{name:'谢谢参与',image:'1.jpg'}}] @param {Object} options.outerCircle {color:'#df1e15'} 外圈颜色，默认红色 @param {Object} options.innerCircle {color:'#f4ad26'} 里圈颜色，默认黄色 @param {Array} options.dots ['#fbf0a9', '#fbb936'] 装饰点颜色，默认深黄浅黄交替 @param {Array} options.disk ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'] 中心奖盘的颜色，默认7彩 @param {Object} options.title {color:'#5c1e08',font:'19px Arial'} 奖品标题颜色	WheelSurf对象
init()	WheelSurf对象	null	null
lottery()	WheelSurf对象	@param {number} 角度 @param {function} callback 旋转完成后的回调	null

方法

对象

参数

返回值

WheelSurf()

canvas的JQuery对象

@param {Object} options

@param {Array} options.list 存储奖品的的列表，example [{1:{name:'谢谢参与',image:'1.jpg'}}]

@param {Object} options.outerCircle {color:'#df1e15'} 外圈颜色，默认红色

@param {Object} options.innerCircle {color:'#f4ad26'} 里圈颜色，默认黄色

@param {Array} options.dots ['#fbf0a9', '#fbb936'] 装饰点颜色，默认深黄浅黄交替

@param {Array} options.disk ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'] 中心奖盘的颜色，默认7彩