js抽奖插件jQuery-SlotMachine

所属分类：其他-游戏

21277 252 查看评论 (2)

分享到微信朋友圈

查看演示立即下载

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

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

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