rouletteWheel是一款基于HTML5 canvas的可用于制作幸运抽奖大轮盘的jQuery插件。该抽奖大轮盘抽奖允许你添加任意数量的“奖品”,并会随机为它们添加一种不同的颜色。它的特点有:
在轮盘的中间设置一个固定圆形按钮来替代按钮。
在某个项目被选择后可以使用回调函数获取该项目。
可以添加任意数量的子项,并会为每个子项随机设置一种颜色。
使用方法
该抽奖大轮盘插件依赖于jQuery和jQuery UI以及HTML5 canvas。使用时要引入jquery.min.js,jquery-ui.min.js和rouletteWheel.js文件。
HTML结构
可以使用一个空的来制作该抽奖大轮盘。
初始化插件
在页面加载完毕之后,可以使用下面的方法来初始化该抽奖大轮盘插件。
$('canvas').rouletteWheel({
items : {
'key' : 'value'
},
selected : function(key, value){
'selected callback function'
},
spinText : 'Spin me' //中间按钮上的文字
});
如果觉得《html制作幸运抽奖 基于canvas的jQuery幸运抽奖大轮盘插件》对你有帮助,请点赞、收藏,并留下你的观点哦!