我不知道如何描述这个,但我相信你会明白,如果你访问这个链接。 http://jsfiddle.net/pahnin/yN3xf/
我想用javascript将文本附加到ap元素并且我很成功,但是如果文本包含像<font>的标签,则标签显示为原样。
我应该添加代码来检测html元素,还是可以通过其他方式完成? 如果我添加检测字体标记的代码如何将标记添加回文本?
I dont know how to describe this but I'm sure you'll understand if you visit this link. http://jsfiddle.net/pahnin/yN3xf/
I want to append text to a p element with javascript and I'm sucessful, but if the text contains a tag like <font> the tag is displayed as it is.
Should I add code to detect the html elements or it can be done any other means? if I do add code which detect font tag how to add the tag back to the text??
最满意答案
你可以这样做。 一旦所有文本都被写出,那么你用原始文本替换整个welcome html。 这不是我承认的最好的。
http://jsfiddle.net/yN3xf/13/
$(document).ready(function() { var htmlcopied = $('.welcome').html(); var textcopied = $('.welcome').text(); $('.welcome').text(''); function foobar(i) { if (i < textcopied.length) { $('.welcome').append(textcopied.charAt(i)); setTimeout(function() { foobar(i + 1); }, 80); } else { $('.welcome').html(htmlcopied); } } foobar(0); });UPDATE
这应该通过不同的方式给你想要的效果。 它在原始文本的顶部有一个div,它缓慢显示文本,看起来它正在输入。
例
http://jsfiddle.net/guanome/LrbVy/
HTML
<div class="welcome">Hi, there <span class="hl">special text</span>, normal text <div class="overlay"></div> </div>JavaScript的
$(document).ready(function() { $('.overlay').css('width', $('div.welcome').css('width')); $('.overlay').css('height', $('div.welcome').css('height') + 15); var origWidth = $('.overlay').css('width').replace(/px/g,''); foobar(origWidth); }); function foobar(i) { if (i > -10) { $('.overlay').css('width', i); setTimeout(function() { foobar(i - 10); }, 80); } }CSS
.hl{ color: red; font-family: helvetica; background: #efefef; color: black; padding: 2px 7px; -moz-box-shadow: 0 1px 1px #CCCCCC; -webkit-box-shadow: 0 1px 1px #CCCCCC; box-shadow: 0 1px 1px #CCCCCC; } div.welcome { position: relative; width: 500px; } .overlay { position: absolute; right: 0; top: -3px; width: 100%; height: 25px; background-color: #FFF; z-index: 10; }更新2
通过此更改,叠加层将动态添加到欢迎消息中,不必设置宽度,并且可以轻松地使用多行。
http://jsfiddle.net/guanome/LrbVy/4/
HTML
<div class="welcome">Hi, there <span class="hl">special text</span>, normal text</div>JavaScript的
$(document).ready(function() { showWelcome(); }); function foobar(i, overlay) { if (i > -10) { overlay.css('width', i); setTimeout(function() { foobar(i - 10, overlay); }, 80); } else { overlay.remove(); } } function showWelcome() { var welcome = $('div.welcome'); welcome.append('<div class="overlay"></div>'); welcome.css('position', 'relative'); var overlay = $('.overlay'); overlay.css({ 'width': welcome.css('width'), 'height': (welcome.outerHeight() + 5), 'position': 'absolute', 'right': '0', 'top': '-3px', 'background-color': '#FFF', 'z-index': '10' }); var origWidth = overlay.css('width').replace(/px/g, ''); foobar(origWidth, overlay); }You could do something like this. Once all the text has been written out, then you replace the whole html of welcome with the original text. It's not the best I admit.
http://jsfiddle.net/yN3xf/13/
$(document).ready(function() { var htmlcopied = $('.welcome').html(); var textcopied = $('.welcome').text(); $('.welcome').text(''); function foobar(i) { if (i < textcopied.length) { $('.welcome').append(textcopied.charAt(i)); setTimeout(function() { foobar(i + 1); }, 80); } else { $('.welcome').html(htmlcopied); } } foobar(0); });UPDATE
This should give you the desired effect through different means. It has a div on top of the original text, and it slow reveals the text, which looks like it is being typed out.
Example
http://jsfiddle.net/guanome/LrbVy/
html
<div class="welcome">Hi, there <span class="hl">special text</span>, normal text <div class="overlay"></div> </div>javascript
$(document).ready(function() { $('.overlay').css('width', $('div.welcome').css('width')); $('.overlay').css('height', $('div.welcome').css('height') + 15); var origWidth = $('.overlay').css('width').replace(/px/g,''); foobar(origWidth); }); function foobar(i) { if (i > -10) { $('.overlay').css('width', i); setTimeout(function() { foobar(i - 10); }, 80); } }css
.hl{ color: red; font-family: helvetica; background: #efefef; color: black; padding: 2px 7px; -moz-box-shadow: 0 1px 1px #CCCCCC; -webkit-box-shadow: 0 1px 1px #CCCCCC; box-shadow: 0 1px 1px #CCCCCC; } div.welcome { position: relative; width: 500px; } .overlay { position: absolute; right: 0; top: -3px; width: 100%; height: 25px; background-color: #FFF; z-index: 10; }UPDATE 2
With this change, the overlay will be added dynamically to the welcome message, the width doesn't have to be set, and it will work with multiple lines easily.
http://jsfiddle.net/guanome/LrbVy/4/
html
<div class="welcome">Hi, there <span class="hl">special text</span>, normal text</div>javascript
$(document).ready(function() { showWelcome(); }); function foobar(i, overlay) { if (i > -10) { overlay.css('width', i); setTimeout(function() { foobar(i - 10, overlay); }, 80); } else { overlay.remove(); } } function showWelcome() { var welcome = $('div.welcome'); welcome.append('<div class="overlay"></div>'); welcome.css('position', 'relative'); var overlay = $('.overlay'); overlay.css({ 'width': welcome.css('width'), 'height': (welcome.outerHeight() + 5), 'position': 'absolute', 'right': '0', 'top': '-3px', 'background-color': '#FFF', 'z-index': '10' }); var origWidth = overlay.css('width').replace(/px/g, ''); foobar(origWidth, overlay); }更多推荐
文本,添加,I'm,javascript,电脑培训,计算机培训,IT培训"/> <meta name="des
发布评论