这是一款效果非常逼真的jQuery模拟水果机特效插件。
安装配置
你可以使用 Bower 阿狸安装这个水果机插件:
$ bower install jquery-slotmachine --save
然后需要在页面的头部引入 jQuery 和 jquery.slotmachine.min.js 文件。
<script type="text/javascript" src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script> <script src="/path/to/jquery.slotmachine.min.js"></script>
使用方法
使用下面的方法创建一个水果机。
var machine = $(foo).slotMachine( params );
水果机的翻牌效果如下:
machine.shuffle( repeat, onStopCallback ); //No args to make rotate infinitely
选择前一张和后一张图片:
machine.prev(); //Previous element machine.next(); //Next element
获取选择的元素。
machine.active; //Current element index
获取下一个选择的元素。
machine.futureActive; //Future active element index
检测水果机是否在运行。
machine.isRunning; //Returns boolean
改变旋转结果:如果返回的值超出了范围,则随机选择一个元素。
machine.setRandomize(foo); //foo must be a function (should return int) or an int
可用参数
参数必须是一个对象,是否包含下一个参数是可选的。
-
active:设置第一个元素。
active: 0
-
delay:设置自旋动画的时间。
delay: 200
-
auto:通过一个整数的毫秒数来使水果机自动运行。
repeat: false
-
stopHidden (currently disabled):如果元素在屏幕的上方或下方则停止动画。
stopHidden: true
-
randomize:通过一个函数来选择你自己的随机元素。该函数必须返回一个0(第一个元素)和最大元素之间的整数值。
$('#foo').slotMachine({ randomize : function(activeElementIndex){ return 0; } });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!