JavaScript 抽奖小应用 Lottery.js

• 授权协议: Apache
• 开发语言: JavaScript
• 操作系统: 跨平台
• 软件首页: https://github.com/meetmore/lottery.js
• 软件文档: https://github.com/meetmore/lottery.js
• 官方下载: https://github.com/meetmore/lottery.js

软件介绍

Lottery.js

一个简单的 JavaScript 抽奖应用，基于 Zepto 或 jQuery，快速便捷接入现有系统。

预览

LiveDemo ->

特性

• 灵活的使用方法

• 可定制的自定义信息

• 风趣的小特效

使用

准备一个参与抽奖者的数据

   [
       {
           "avatar": "//example.com/avatar_1.jpg",    // 头像图片地址
           "name": "MeetMore",                        // 名字
           "data": {                                  // 该用户额外数据
               "company": "MeetMore Inc.",
               "title": "CEO",
               ...
           }
       },
       ……
   ]

在页面中引入 CSS 和 JS

Ready to go

$.lottery({ 
        api:"./api.json" 
    });

参数

$.lottery({ 
        el: ".lottery",                           // 在哪里输出抽奖的dom，使用jquery选择器
        timeout: 10,                              // 抽奖自动停止时间（秒）
        once: true,                               // 每人只能中奖一次（防止重复中奖）
        title: "company",                         // 中奖界面显示的标题 data[key]
        subtitle: "title",                        // 中奖界面显示的副标题 data[key]
        api: "http://example.com/lottery.json",   // 抽奖者数据 API 地址（非必填，若填写则 data 参数将被忽略）
        data: [],                                 // 直接传入抽奖者数据
        confetti: true,                           // 中奖时候显示小彩带动画
        showbtn: true,                            // 显示抽奖控制按钮
        fitsize: true,                            // 根据屏幕大小自动调整头像大小
        speed: 400                                // 随机到下一个参与者的间隔时间，单位毫秒
    });

API

$.lottery('start');      // 开始抽奖
    $.lottery('stop');       // 停止抽奖
    $.lottery('getUsers');   // 获取用户列表
    $.lottery('getWinners'); // 获取中奖用户列表

浏览器支持

• 现代浏览器

许可证

Copyright © Duohui.co - Apache License 2.0

Credits

• confetti.js is created by Javier Sosa

• Icons are created by Okay: Yasir B. Eryılmaz, Crown: Pundimon, Dice: davidyu from the Noun Project

• Move.js is created by TJ Holowaychuk

本文地址：https://codercto.com/soft/d/2877.html