我尝试显示带有输入文字效果的文字。我试过这样
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<span id="holder"></span>
</body>
<script>
(function($)
{
$.fn.writeText = function(content) {
var contentArray = content.split(""),
current = 0,
elem = this;
setInterval(function() {
if(current < contentArray.length) {
elem.text(elem.text() + contentArray[current++]);
}
}, 100);
};
})(jQuery);
$("#holder").writeText("This is some text");
</script>
</html>
它可以工作，但我需要像这样显示段落内容，但现在要在 writeText 中调用段落内容。
如果它不是显示 Pragraph
之类的打字效果的好方法。请告诉我如何解决我的问题。请给我任何想法。感谢进阶。
最佳答案
我只是为此修改了你的代码，你只需要获取每个段落的内容并将每个段落传递给你的 writeText 函数()
只需将 class="effect"赋予
即可动画
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<span id="holder"></span>
<p class="effect">Hi, this is Gokul Praveen' PARA 1!</p>
<p class="effect">Hi, this is James Bond's PARA 2!</p>
</body>
<script>
(function($)
{
$.fn.writeText = function(content) {
var contentArray = content.split(""),
current = 0,
elem = this;
setInterval(function() {
if(current < contentArray.length) {
elem.text(elem.text() + contentArray[current++]);
}
}, 100);
};
})(jQuery);
$(".effect").each(function(index) {
var text = $( this ).text();
$(this).empty();
$(this).writeText(text);
});
//$("#holder").writeText("This is some text");
</script>
</html>
在浏览器中执行代码并检查。不要忘记将其标记为正确!
关于javascript - 段落文字如何显示文字打字效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26113629/