Question

我试图创建一个打字机效果，我让一切正常，但我无法弄清楚如何创建一个新的线。

我已经尝试了所有三个：

\n
\r
<br />

但它只是输入这些字符。

这是我的javascript函数：

$.fn.Typewriter = function(opts){
    var $this = this,
        defaults = { animDelay: 50 },
        settings = $.extend(defaults, opts);
    $.each(settings.text, function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + letter);
        }, settings.animDelay * i);
    });
}

以下是我如何调用它的示例：

$('#howto').Typewriter({
animDelay: 100,
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br /> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \r Ut enim ad minim veniam, quis nostrud exercitation \n ullamco laboris nisi ut aliquip ex ea commodo consequat.'});

这就是最终的结果：

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

我希望它看起来像：

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.

感谢所有帮助！

http://jsfiddle.net/9Qsku/

Answer 1

在字符串上使用\ n，并以这种方式修改snipplet

$.fn.Typewriter = function(opts){
var $this = this,
    defaults = { animDelay: 50 },
    settings = $.extend(defaults, opts);
$.each(settings.text, function(i, letter){
    setTimeout(function(){
        $this.html($this.html() + (letter!='\n'?letter:'<br />'));
    }, settings.animDelay * i);
});
}

Answer 2

<br/>应该可以正常工作： http://jsfiddle.net/7WVZX/

[更新]问题可能是您逐个添加字符，而不是整体添加换行符。这可能对您更有效：

$this.html(settings.text.substr(0,i));

结果：http://jsfiddle.net/9Qsku/1/

Answer 3

尝试使用.html ...

.html('Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit,');

如何为此Javascript函数创建新行或添加HTML？

3 个答案: