js抽奖插件jQuery-SlotMachine

查看演示立即下载

插件描述：一个简单，轻量级的代码，使老虎机动画效果。它还导出一个js包装器以允许与jQuery一起使用。

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

安装

使用 npm 安装组件:

1	`npm install jquery-slotmachine --save`

使用 Bower 安装组件:

1	`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 文件夹中的脚本:

1	`<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
});

Name	Type	Default	Description
active	`Number`	`0`	The initial visible element (0 means the first one)
delay	`Number`	`200`	Duration (in ms) of each spin
auto	`Boolean`	`false`	Runs the carousel mode when creating the machine
spins	`Number`	`5`	Number of spins after stop in carousel mode
randomize	`Function`	`null`	Function (returns number) that is going to be called to set the next active element
onComplete	`Function`	`null`	Callback after each spin in carousel mode
inViewport	`Boolean`	`true`	Only spin when the machine is inside the viewport
direction	`String`	`up`	The spin direction (possible values are `up` and `down`)
transition	`String`	`ease-in-out`	The CSS transition

属性

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: 转换设置的别名。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： js火焰特效
下一个特效： canvas制作简单的HTML图表，折线或者矩形统计(原创)