js文字滚动效果

效果

html

<div class="index-ling clearfix">
    <div class="ling-left float-left text-center">
        <img src="assets/img/index/index-ling.png">公告
    </div>
    <div id="scroll_div" class="float-left">
        <div id="scroll_begin">
            <span class="lan">我是蓝色我是蓝色我是蓝色我是蓝色我是蓝色我是蓝色我是蓝色我是蓝色我是蓝色</span>
            <span class="hui">我是灰色我是灰色我是灰色我是灰色我是灰色我是灰色我是灰色我是灰色我是灰色</span>
        </div>
        <div id="scroll_end"></div>
    </div>
</div>

CSS

//css
.index-ling {
    background: rgba(242, 242, 242, 0.6);
    width: 90%;
    margin: 0 auto;
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
}
 
.index-ling>.ling-left {
    width: 10%;
    color: #FF9000;
}
 
.index-ling>.ling-left img {
    width: 18px;
    margin: -2px 5px 0 0;
}
 
#scroll_begin span {
    margin-right: 20px;
    cursor: pointer;
}
 
.lan {
    color: #3B7FFC;
}
 
.hui {
    color: #8D8D8D;
}
 
#scroll_div {
    overflow: hidden;
    width: 85%;
    white-space: nowrap;
}
 
#scroll_begin,
#scroll_end {
    display: inline;
}

JS

//js
//文字横向滚动
function ScrollImgLeft() {
    var speed = 50;
    var MyMar = null;
    var scroll_begin = document.getElementById("scroll_begin");
    var scroll_end = document.getElementById("scroll_end");
    var scroll_div = document.getElementById("scroll_div");
    scroll_end.innerHTML = scroll_begin.innerHTML;
 
    function Marquee() {
        if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {
            scroll_div.scrollLeft -= scroll_begin.offsetWidth;
        } else {
            scroll_div.scrollLeft++;
        }
    }
    MyMar = setInterval(Marquee, speed);
    scroll_div.onmouseover = function() {　　　　　　　
        clearInterval(MyMar);　　　　　
    }　　　　
    scroll_div.onmouseout = function() {　　　　　　　
        MyMar = setInterval(Marquee, speed);　　　　　　　　　
    }
}
ScrollImgLeft();