简单使用js实现跑马灯效果

原创 阁主  2019-03-26 20:55:01  阅读 4145 次 评论 16 条
摘要:

效果:每过50毫秒重复把第一个字符放到最后,达到动态跑马灯效果!

演示效果:

GIF.gif

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js跑马灯效果</title>
</head>
<body>
    <div id="txt" style="color: white;background-color: red;text-align: center;font-size: 50px;">阁主博客欢迎您的来访!</div>
    <script type="text/javascript">
        setInterval(function ()//通过定时器重复动作
        {
            var oTxt = document.getElementById('txt'); //获取标签
            var txt = oTxt.innerText; //获取标签文本内容
            // console.log(typeof txt)  页面控制台查看是string
            var first_i = txt[0]; //字符串索引取值
            var last_i = txt.slice(1,txt.length);//字符串切片
            var new_txt = last_i + first_i;//字符串拼接
            oTxt.innerText = new_txt; //拼接后的字符串放到标签文本内容
        },50)
    </script>
</body>
</html>

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

本文地址:https://www.mainblog.cn/147.html
版权声明:本文为原创文章,版权归 阁主 所有,欢迎分享本文,转载请保留出处!
免责申明:有些内容源于网络,没能联系到作者。如侵犯到你的权益请告知,我们会尽快删除相关内容。

评论已关闭!