用js和css实现一行一行文字交替显示

用js和css实现,效果是:有多行文字,一行一行的交替显示,每隔几秒显示一行,循环显示。

代码如下,保存为html即可看到效果:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。