jQuery模拟水果机特效插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery模拟水果机特效插件
jQuery模拟水果机特效插件
分享:

    插件介绍

    这是一款模拟水果机(老虎机)特效的jQuery插件。该水果机特效效果非常逼真,它可以使图片或文字不断的快速垂直滚动,按下停止按钮后图片可以慢慢停下来,模拟出现实的水果机效果。

    浏览器兼容性

    浏览器兼容性
    时间:01-14
    阅读:
简要教程

这是一款效果非常逼真的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;
        }
    });
                      

更多详细信息请参考:https://github.com/josex2r/jQuery-SlotMachine