js走马灯效果

最新推荐文章于 2024-11-21 14:45:35 发布

原创最新推荐文章于 2024-11-21 14:45:35 发布 · 166 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了一种使用HTML和JavaScript实现的文字走马灯效果，通过不断将首字符移至末尾的方式，使文本产生流动的视觉效果。适用于网页设计中增加动态元素。

文字走马灯效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>白日依山尽，黄河入海流</p>
    <script>
        var pp = document.querySelector("p");

        var timer = setInterval(function () {
            var str = pp.innerHTML;
            var one = str.charAt(0);//下标为0的字符串取出来
            var show = str.substring(1);//截取下标为1开始，到最末尾结束
            pp.innerHTML = show + one; //在页面的显示效果

        }, 100);

    </script>
</body>

</html>