gpt4 book ai didi

javascript - 段落文字如何显示文字打字效果

转载 作者:行者123 更新时间:2023-11-30 17:16:02 25 4
gpt4 key购买 nike

我尝试显示带有输入文字效果的文字。我试过这样

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com