浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery定时执行 2016-11-30

人气6928

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


rouletteWheel是一款基于HTML5 canvas的可用于制作幸运抽奖大轮盘的jQuery插件。该抽奖大轮盘抽奖允许你添加任意数量的“奖品”,并会随机为它们添加一种不同的颜色。它的特点有:

  • 在轮盘的中间设置一个固定圆形按钮来替代<button>按钮。
  • 在某个项目被选择后可以使用回调函数获取该项目。
  • 可以添加任意数量的子项,并会为每个子项随机设置一种颜色。

使用方法

该抽奖大轮盘插件依赖于jQuery和jQuery UI以及HTML5 canvas。使用时要引入jquery.min.js,jquery-ui.min.js和rouletteWheel.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/rouletteWheel.js"></script>                
              
HTML结构

可以使用一个空的<canvas>来制作该抽奖大轮盘。

<canvas id="canvas" width="500" height="500"></canvas>            
              
初始化插件

在页面加载完毕之后,可以使用下面的方法来初始化该抽奖大轮盘插件。

$('canvas').rouletteWheel({
  items : {
    'key' : 'value'
  },
  selected : function(key, value){
    'selected callback function'
  },
  spinText : 'Spin me' //中间按钮上的文字
}); 
              

github:https://github.com/JavoByte/rouletteWheel

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:84.93KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2070.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于canvas的jQuery幸运抽奖大轮盘插件

我当前G币余额:0 已下载次数:1

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有1 评论)