JavaScript实现文字跑马灯效果

2021-09-04 10:02:03 阅读：400 来源： 互联网

标签：文字 function notice move JavaScript 跑马灯 race var

项目开发中若需要做系统公告，可在此Demo的基础上稍加修改实现一个简单的系统公告效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字跑马灯</title>
    <style>
        #race_notice_p{
            position:relative;
            margin:20px auto;
            width:800px;
            overflow:hidden;
            height:50px;
        }
        #race_notice_s{
            position:absolute;
            left:0;
            top:0;
        }
        #race_notice_s p span{
            margin:0 20px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div id='race_notice_p' >
        <div id='race_notice_s'>
            <p>
                <span>本文主要分享了原生JS实现跑马灯效果的示例代码。看，这就是跑马灯效果</span>
            </p>
        </div>
    </div>
</body>
    <script>
        window.onload=function(){
            function move(){
                var speed = -5;
                var race_notice_p = document.getElementById('race_notice_p');
                var race_notice_s = document.getElementById('race_notice_s');
                var p = race_notice_s.getElementsByTagName('p')[0];
                var length = p.offsetWidth;
                p.innerHTML +=p.innerHTML;
                function move_do(){
                    if(race_notice_s.offsetLeft < - length){
                        race_notice_s.style.left=0;
                    }
                    race_notice_s.style.left = race_notice_s.offsetLeft + speed +'px';
                }
                setInterval(move_do,200);
            }
            move();
        }
    </script>
</html>

标签：文字,function,notice,move,JavaScript,跑马灯,race,var
来源： https://www.cnblogs.com/wxf1314/p/15225862.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript实现文字跑马灯效果