Question

我希望在JavaScript中输入效果，如下所示： Typing Text Animation Tutorial Timed Loops and Array Programming Using JavaScript

您建议使用哪个库？总是定义type（）并使用setTimeout（）？我想在Apache cordova（phonegap）中使用它。

Answer 1

嗯，我没有使用过cordova，所以不确定这会有多大的帮助，但这里有一个简单的jQuery插件，我用来模拟文本的输入。下面的源代码，以及一个jsfiddle演示（因为我从未将它发布到github或任何地方）。也许它可以帮助您为cordova创建自己的代码。

http://jsfiddle.net/jackwanders/zHzAs/

// Make sure Object.create is available in the browser (for our prototypal inheritance)
// Courtesy of Douglas Crockford
if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

(function($) {

    // Main plugin class
    var Typer = {
        // Recursive function that types one letter at a time
        doType: function() {
            var _this = this;
            _this.el.innerHTML += _this.letters.shift();

            // If there are more letters to type, setTimeout
            // Otherwise, execute callback function
            if(_this.letters.length > 0) {
                _this.timeout = window.setTimeout(function(){
                    _this.doType();
                },_this.options.speed);
            } else {
                if(typeof _this.callback === 'function') {
                    _this.callback();
                }
            }
        },

        // Plugin init function
        init: function(el,options,callback) {
            this.options = $.extend({},$.fn.type.defaults,options);
            this.callback = callback;
            this.el = el;
            this.$el = $(el);
            this.letters = (this.options.text || el.innerHTML).split('');

            if(!this.options.append) { this.el.innerHTML = ''; }
            if(this.$el.is(':hidden')) { this.$el.show(); }

            this.doType();
        }
    };

    // Plugin function - for each element, create a new Typer and run 'init()'
    $.fn.type = function(options,callback) {
        return this.each(function(){
            var t = Object.create(Typer);
            t.init(this,options,callback);
        });
    };

    // Plugin option defaults, overrideable by user
    $.fn.type.defaults = {
        speed: 200,  // interval between key presses
        text: null,   // text to type into element
        append: false  // set to true to add text to element.
    };

})(jQuery);

调用插件的一些选项：

$('#p1').type();

$('#p2').type({
    speed:40,
    text: "This text will be added to what is in the paragraph already.",
    append: true
},function(){
    // something to do when typing is complete
});

Answer 2

找到这个漂亮的图书馆：TheaterJS（https://github.com/Zhouzi/TheaterJS）

这是一个演示：http://gabinaureche.com/TheaterJS/

一种人类打字效果。

Javascript：您建议使用哪种文本输入效果库？

2 个答案: