js抽奖插件jQuery-SlotMachine

 查看演示  website  立即下载

 jQuery现在不是必需的!这个名字只是继承以前的。

安装

使用 npm 安装组件:

npm install jquery-slotmachine --save

使用 Bower 安装组件:

bower install jquery-slotmachine --save

例子

<div id="machine">
  <div>Madrid</div>
  <div>London</div>
  <div>New York</div>
</div>

<script>
const el = document.querySelector('#machine');
const machine = new SlotMachine(el, {
  active: 1,
  delay: 450,
  auto: 1500
});
</script>

使用

包括位于 dist 文件夹中的脚本:

<script src="/path/to/slotmachine.min.js"></script>

然后你可以让它在你的应用程序中调用lib：

const element = document.getElementById('my-machine');
const machine = new SlotMachine(element, { /* options */ });

如果你喜欢jQuery样式，那么在jQuery库之后导入包装器：

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/slotmachine.min.js"></script>
<script src="/path/to/jquery.slotmachine.min.js"></script>

$(document).ready(function(){
  $('#my-machine').slotMachine({ /* options */ });
});

设置

使用函数的第一个参数将对象与选项传递:

const machine = new SlotMachine(element, {
  active: 2,
  auto: true
});

属性

• machine.nextActive: 获取下一个活动元素（仅在改组时）。

• machine.nextIndex: 根据当前方向的下一个元素索引。

• machine.prevIndex: 根据当前方向的Prev元素索引。

• machine.random: 获取机器边界之间的rando索引。

• machine.running: 检查机器是否正在运行。

• machine.stopping: 检查机器是否正在停止。

• machine.visible: 检查机器是否可见。

• machine.visibleTile: 获取机器视窗中的当前可见元素。

• machine.active: 活动设置的别名。

• machine.randomize: 随机化设置的别名。

• machine.direction: 方向设置的别名。

• machine.transition: 转换设置的别名。

PREVIOUS:
NEXT:
canvas制作简单的HTML图表，折线或者矩形统计(原创)
js火焰特效