admin管理员组

文章数量:1794759

用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代码进行加密。

例如：

加密后的代码会成为以下密文形式：

使用还和原来一样：

本文标签： 用js和css实现一行一行文字交替显示

版权声明：本文标题：用js和css实现一行一行文字交替显示 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1755016580a1709455.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。