失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html制作幸运抽奖 基于canvas的jQuery幸运抽奖大轮盘插件

html制作幸运抽奖 基于canvas的jQuery幸运抽奖大轮盘插件

时间:2018-08-06 22:17:05

相关推荐

html制作幸运抽奖 基于canvas的jQuery幸运抽奖大轮盘插件

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幸运抽奖大轮盘插件》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。