角子老虎机 By Javascript ; Slot By Javascript

摘要:Js 角子老虎机 package


最近笔者在网络上看到一个不错玩的套件 ,

Demo 网站   ,  GitHub

在这套件我们可以客制化的弹性很大 , 例如角子老虎机里面的图示其实是由两张相同的图片构成 ,

一张是模糊版用来当画面快速进行中的照片 , 另外一张清晰版是当停止时所显示的图片

    

移动的动画主要是用指定图片的position来达成 , 当你在看Demo网站的时候可以使用开发者工具

指定Slot1 div , 其background-position 的数字会不断的改变

有几个可能会玩到的项目:

一. 添加新的角子老虎

在Slot.js里面搜寻 //create slot objects ,

默认初始化了3个角子老虎 , 可以在这里移除或者增加你自己的Slot ,  当初始化一个新的Slot ,

你同样需要增加它的Start , Stop , Reset 动作 , 你可以在 $( '#control').click 范围里面增加设定

二.更换角子老虎里面的图片项目

你可以直接制作自己的图片 , 不过一张是模糊版 , 另外一张是清晰版 , 其原理就像前面提到的一样

三.将角子老虎设定往上跑...

这可能有点无聊 .... 不过你可以在


$(el).pan({
            fps:30,
            dir: 'down'  //up的话就会往上飘
});

在里面你可以发现设定了一组win数组 , 这意思很明白了 ...


    var win = [];
    win[0] = win[454] = win[913] = 1;     3个orange位置
    win[80] = win[539] = win[1000] = 2;
    win[165] = win[624] = win[1085] = 3;
    win[237] = win[696] = win[1157] = 4;
    win[310] = win[769] = win[1230] = 5;
    win[378] = win[837] = win[1298] = 6;

对照posArr这组数组的项目


 posArr = [           
            0, //orange
            80, //number 7
            165, //bar
            237, //guava
            310, //banana
            378, //cherry
            454, //orange
            539, //number 7
            624, //bar
            696, //guava
            769, //banana
            837, //cherry
            913, //orange
            1000, //number 7
            1085, //bar
            1157, //guava
            1230, //banana
            1298 //cherry
        ];