Question

我是Javascript的新手，我发现了这个很酷的jquery文本离开板效果 http://jsfiddle.net/aino/9yyVd/

的JavaScript

$.fn.ticker = function( options ) {

    options = $.extend({
        uppercase: true,
        extra: ',.:+=/()',
        speed: 30
    }, options);

    var alph = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';

    if ( !options.uppercase ) {
        alph = alph + alph.toLowerCase();
    }
    alph = '01234567890'+alph + options.extra + ' ';

    return this.each(function() {
        var k = 1,
            elems = $(this).children(),
            arr = alph.split(''),
            len = 0,
            fill = function( a ) {
                while( a.length < len ) {
                    a.push(' ');
                }
                return a;
            },
            texts = $.map( elems, function( elem ) {
                var text = $(elem).text();
                len = Math.max(len, text.length);
                return options.uppercase ? text.toUpperCase() : text;
            }),
            target = $('<div>'),
            render = function(print) {
                target.data('prev', print.join(''));
                fill(print);
                print = $.map(print, function(p) {
                    return p == ' ' ? '&#160;' : p;
                });
                return target.html('<span>' + print.join('</span><span>') + '</span>');
            },
            attr = {}

        $.each(this.attributes, function(i, item) {
            target.attr( item.name, item.value );
        });

        $(this).replaceWith( render( texts[0].split('') ) );

        target.click(function(e) {

            var next = fill(texts[k].split('')),
                prev = fill(target.data('prev').split('')),
                print = prev;

            $.each(next, function(i) {
                if (next[i] == prev[i]) {
                    return;
                }
                var index = alph.indexOf( prev[i] ),
                    j = 0,
                    tid = window.setInterval(function() {
                        if ( next[i] != arr[index] ) {
                            index = index == alph.length-1 ? 0 : index + 1;
                        } else {
                            window.clearInterval(tid);
                        }
                        print[i] = alph[index];
                        render(print);
                }, options.speed)
            });
            k = k == texts.length-1 ? 0 : k + 1;
        });
    });
};

$('#text').ticker();

HTML

<ul id="text">
    <li>4032 London</li>
    <li>5901 Paris</li>
    <li>9954 Cologne</li>
    <li>4204 St. Petersburg</li>
</ul>
<p>&#8593; Click</p>

CSS

#text{cursor:pointer;overflow:hidden;font:40px/1 monospace;}
#text span{display:block;float:left;background:#444;
    color:#fff;margin-right:1px;}

我注意到在单击div之后脚本会更改为数组的下一部分，这与target.click有关。我想。

如何更改此设置以更改onload？

Answer 1

当然，只需将target.click更改为$(document).ready。

我edited the example要演示。

Answer 2

只需使用.ready（）代替.click（）;）

http://api.jquery.com/ready/

Answer 3

如果您删除了target.click(function(e) {，这将有效“onload” - http://jsfiddle.net/9yyVd/138/

但是，如果你想保持click（）触发器，你可以在加载后触发点击。您可以使用$('#text').trigger('click') - http://jsfiddle.net/9yyVd/139/

执行此操作

Jquery脚本onload而不是单击时

3 个答案: