Question

我使用的旋转插件类似于机场布告牌。

以下是http://unwrongest.com/projects/airport/

撰写的脚本

我想知道在字母旋转结束后如何触发函数，这样我就可以在下一个数组开始旋转之前更改背景div的css背景属性。

像这样：background1 - ＆gt; rotate "7 days" - ＆gt; done rotation - ＆gt; background2 - ＆gt; rotate "14 days" - ＆gt; done rotation - ＆gt; background3 - ＆gt; rotate "22 days"等......

HTML

$('.dur').airport(['7 days','14 days','22 days','31 days','3 weeks','2 months']);

JS脚本

(function($){ 
     $.fn.extend({  
         airport: function(array) {
            var self = $(this);
            var chars = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g',' ','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','-','1','2','3','4','5','6','7','8','9','0'];
            var longest = 0;
            var items = items2 = array.length;

            function pad(a,b) { return a + new Array(b - a.length + 1).join(' '); }

            $(this).empty();

            while(items--)
                    if(array[items].length > longest) longest = array[items].length;

            while(items2--)
                    array[items2] = pad(array[items2],longest);

            spans = longest;
            while(spans--)
            $(this).prepend("<span class='c" + spans + "'></span>");
            function testChar(a,b,c,d){
                if(c >= array.length)
                        setTimeout(function() { testChar(0,0,0,0); }, 0);               
                else if(d >= longest)
                       setTimeout(function() { testChar(0,0,c+1,0); }, 10000);
                else {
                    $(self).find('.c'+a).html((chars[b]==" ")?"&nbsp;":chars[b]);
                    setTimeout(function() {
                        if(b > chars.length){
                                testChar(a+1,0,c,d+1);
                            }
                        else if(chars[b] != array[c].substring(d,d+1)){
                                testChar(a,b+1,c,d);
                            }
                        else{
                                testChar(a+1,0,c,d+1); 
                        }
                    }, 1);
                }
            }
            testChar(0,0,0,0);
        } 
    }); 
})(jQuery);

Answer 1

以下条件

else if(d >= longest)
    setTimeout(function() { testChar(0,0,c+1,0); }, 10000);

是插件在完成一次后准备下一次旋转的地方 - 所以你可以在那里应用一个类/调用一个函数。

添加括号并包含应用类的逻辑，如下所示：

else if(d >= longest) {
    $('.dur').attr('class', 'dur ' + (colors[c]));
        setTimeout(function() { testChar(0,0,c+1,0); }, 1000);
}

这是一个代码示例：http://codepen.io/anon/pen/gbqqKX

完成机场插件文字效果时触发功能

1 个答案: