JQuery typewrite插件:

时间:2012-12-12 11:35:00

标签: jquery ticker

我使用jquery ticker并使用typewrite效果 当我使用“打字”效果时,此代码禁用链接并仅在浏览器中显示文本,当我更改打字机:false时,问题已解决,但我想使用打字机效果 这段代码:

    (function ($) {
        $.fn.Ticker = function (options) {
            var defaults = {
                // Time to display each news item. (integer, milliseconds)
                pause: 5000,
                // Time taken to fade in next news item. (integer, milliseconds)
                fadeIn: 800,
                // Time taken to fade out current news item. (integer, milliseconds)
                fadeOut: 800,
                // Pause between displaying each item when fading between items. (integer, milliseconds)
                delay: 500,
                // Next news item typed out one character at a time. If false item will fade in. (boolean)
                typewriter: true,
                // Time to type each character if using the typewriter effect (integer, milliseconds)
                speed: 35,
                // Character to use to mimic a computer cursor if using the typewriter effect (string|boolean)
                cursor: '_'
            };
            // Merge default options with user options
            var opts = $.extend({}, defaults, options);
            return $(this).each(function () {
                var list = $(this), typewriter = {}, interval;
                // Activate ticker and display first item
                list
                .addClass('ticker-active')
                .children(':first')
                .css('display', 'block');
                function changeItem() {
                    var item = list.children(':first'),
                    next = item.next(),
                    copy = item.clone();
                    clearTimeout(interval);
                    // Append copy of current item to bottom of list
                    $(copy)
                    .css('display', 'none')
                    .appendTo(list);
                    // Fade current item out, remove from DOM then animate the next item
                    item.fadeOut(opts.fadeOut, function () {
                        $(this).remove();
                        // Animate
                        if (opts.typewriter) {
                            typewriter.string = next.text();
                            next
                            .text('')
                            .css('display', 'block');
                            typewriter.count = 0;
                            typewriter.timeout = setInterval(type, opts.speed);
                        }
                        else {
                            next
                            .delay(opts.delay)
                            .fadeIn(opts.fadeIn, function () {
                                setTimeout(changeItem, opts.pause);
                            });
                        }
                    });
                }
                function type() {
                    typewriter.count++;
                    var text = typewriter.string.substring(0, typewriter.count);
                    if (typewriter.count >= typewriter.string.length) {
                        clearInterval(typewriter.timeout);
                        setTimeout(changeItem, opts.pause);
                    }
                    else if (opts.cursor) {
                        text += ' ' + opts.cursor;
                    }
                    list
                    .children(':first')
                    .text(text);
                }
                // Test there are more items to display then start ticker
                if (list.find('li').length > 1) {
                    interval = setTimeout(changeItem, opts.pause);
                }
            });
        };
        $('.ticker').Ticker();
    })(jQuery);
});//]]> 

1 个答案:

答案 0 :(得分:0)

您可以尝试将文字添加到。

然后你可以调用a-> span

的打字机功能
<a href=""><span>Here your Link</span></a>
$('a span').typewriter({options...})