jquery实现文本逐字出现效果
最近手里有个非前后端分离的项目,有一个需要逐字显示的功能,而且必须要逐行,逐字显示。
process_one() 方法是处理每一行的数据,将每一行的数据传给add()方法,然后设置时间间隔进行下一行处理,直到完全处理完成。这里我是用递归处理的。
add()方法是处理每一行中的文字逐个显示的方法,
// 这是取值的div
<div id="info_one" class="mainText info" style="opacity: 0;height:0;">
{!! $card->brief_html !!}
// 里面的值是从富文本取过来的,都带着P标签 <p>都是这种</p>
</div>
//这是最终渲染的div
<div id="info_show_one" class="mainText info"></div>
$(function() {
var dom_index = 0; // p标签计数index
// 处理每一行
function process_one(arrs, dom) {
let nodeArr = []
nodeArr = $("#info_one p")
if (nodeArr.eq(0).text().length == 0) return;
let wordIndex = 0 // 每个文字的index
let node = nodeArr.eq(dom_index) // 获取P标签
let textItem = nodeArr.eq(dom_index).text() // P标签的文字
let time = nodeArr.eq(0).text().length - 1 //每行完成时间,作为下一行开始时间间隔
// 开始执行逐字加载
add(node, textItem, wordIndex, dom)
let timer2 = null;
// 设置定时器来间隔开每行文字的触发
timer2 = setTimeout(function() {
if (dom_index < nodeArr.length) {
process_one(arrs, dom)
} else {
clearTimeout(timer2)
return;
}
}, time * 500)
}
// 添加文字
function add(node, textItem, wordIndex, dom) {
let newP = ''
let timer = null
timer = setInterval(function() {
if (wordIndex != textItem.length - 1) {
newP += textItem[wordIndex]
wordIndex++;
node.html(newP)
$("#info_show_one").append(node)
} else {
wordIndex = 0;
clearInterval(timer)
}
}, 500)
}
// 调用 把P标签和目标dom的id都穿进去,当然你也可以才用其他方法来获取P标签
process_one($("#info_one p"), 'info_show_one')
});