2

我尝试创建打字机效果，一切正常，但我不知道如何创建新行。

我已经尝试了所有三个：

\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/

4

3 回答 3

2

在字符串上使用 \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);
});
}
于 2012-11-19T20:58:05.243 回答
0

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

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

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

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

于 2012-11-19T21:00:31.963 回答
-1

尝试使用 .html ...

.html('Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit,');
于 2012-11-19T21:01:18.057 回答