用js和css实现一行一行文字交替显示
用js和css实现，效果是：有多行文字，一行一行的交替显示，每隔几秒显示一行，循环显示。
代码如下，保存为html即可看到效果：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<style>
#textContainer {
overflow: hidden;
}
#textContainer span {
position: absolute;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
#textContainer span.active {
opacity: 1;
}
</style>
</head>
<body>
<span id="textContainer">
<span class="active">First line of text</span>
<span>Second line of text</span>
<span>Third line of text</span>
</span>
<script>
let currentIndex = 0;
const spans = document.querySelectorAll('#textContainer span');
const totalSpans = spans.length;
function showNextText() {
spans[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % totalSpans;
spans[currentIndex].classList.add('active');
}
setInterval(showNextText, 5000);
</script>
</body>
</html>上面的代码中，用css设定显示效果，用js代码控制每行文字的显示。
如果不想让他人查看js源码，防止别人知道实现原理，可以用JShaman、JS-Obfuscator、JsJiaMi.online等JS代码加密工具对上面的js代码进行加密。
例如：
加密后的代码会成为以下密文形式：
使用还和原来一样：
发布者：admin，转转请注明出处：http://www.yc00.com/web/1755016577a5226452.html
评论列表（0条）