Question

我正在玩一个名为ghostType的jquery函数，它基本上键入了文本，好像它正在屏幕上输入一样。它有点酷，但我似乎无法让它换行。

jquery如下：

(function( $ ){
  $.fn.ghostType = function() {

    return this.each(function() {

        var $this = $(this);
        var str = $this.text();
        $this.empty().show();
        str = str.split("");
        str.push("_");

        // increase the delay to ghostType slower
        var delay = 100;

        $.each(str, function (i, val) {
            if (val == "^") {
                // Do nothing. This will add to the delay.
            }
            else {
                $this.append('<span>' + val + '</span>');
                $this.children("span").hide().fadeIn(100).delay(delay * i);

            }
        });
        $this.children("span:last").css("textDecoration", "blink");

    });

};
})( jQuery );

据我所知，这段代码将所选元素TEXT中的每个字符都放入单独的标签中，因此省略了HTML（即br）与行var str = $ this.text（）;

如何让这段代码包含换行符？

我能想到的最好的方法是添加额外的'else if'语句，如下所示：

            else if ( val == "*" ) {
                $this.append('<br />');
            }

因此*符号会成为换行符...但是这会损坏闪烁光标不会位于每个字母旁边的功能，因为它会消失。否则，它会起作用...

您可以看到我在http://jsfiddle.net/JNyQV/

所做的一些示例

Answer 1

(function( $ ){
$.fn.ghostType = function() {

    return this.each(function() {

        var $this = $(this);
        var str = $this.text();
        $this.empty().show();
        str = str.split("");
        str.push("_");

        // increase the delay to ghostType slower
        var delay = 55;

        $.each(str, function (i, val) {
            if (val == "^") {
                // Do nothing. This will add to the delay.
            }
            else {
                if (val == "*") val = "<br/>";
                $this.append('<span>' + val + '</span>');
                $this.children("span").hide().fadeIn(100).delay(delay * i);

            }
        });
        $this.children("span:last").css("textDecoration", "blink");

    });

};
})( jQuery );

$('#example').ghostType();

Answer 2

最好的办法是将所选元素视为一个元素，而不只是简单地抓取它的文本。

以下摘录自one of my plugins处理文字......

var findText = function(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

我最初从bobince的答案中得到了这段代码。

通过检查my plugin的其余部分，您应该能够了解其工作原理。基本上，它以递归方式迭代所有文本节点，将每个字符包装在span中，稍后进行动画处理。

Answer 3

这就是我编写脚本的方法......只需添加整个部分字符串而不是每个字母。最大的区别是最后一个字母没有淡入。我不认为效果是那么明显，但应该可以只添加最后一个字母，如果它是必需的话就会淡入。这是demo。

(function($) {
    $.fn.ghostType = function() {

        return this.each(function() {

            // increase the delay to ghostType slower
            var delay = 55,

            $this = $(this),
            str = $this.text(),
            i = 0,
            l = str.length,
            t,
            loop = function() {
                if (i <= l) {
                    t = str.substring(0,i++).replace(/\^/g, '').replace(/\*/g, '<br>');
                    $this.html(t + '<span class="blink" >_</span>');
                    setTimeout(loop, delay);
                }
            };

            $this.empty().show();
            loop();
        });

    };
})(jQuery);

$('#example').ghostType();

如何使这个ghostType jquery函数做换行？

3 个答案: