滚动公告栏,鼠标悬浮暂停

html 部分

<div id="scroll_div" class="fl">
                <div id="scroll_begin" style="text-align:center;">
                     <c:forEach var="list" items="${notice}" varStatus="status">
                         <span style="color:#3366CC;font-size: 15px;"><b>${list.TITLE}：</b>${list.CONTENT}</span>
                     </c:forEach>
                </div>
                <div id="scroll_end"></div>
</div>

js部分

<script>
    function ScrollImgLeft(){
        var speed=50;//初始化速度 也就是字体的整体滚动速度
        var MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容
        var scroll_begin = document.getElementById("scroll_begin");//获取滚动的开头id
        var scroll_end = document.getElementById("scroll_end");//获取滚动的结束id
        var scroll_div = document.getElementById("scroll_div");//获取整体的开头id
        
        scroll_end.innerHTML=scroll_begin.innerHTML;  //滚动的是html内部的内容,原生知识!
        
        //定义一个方法
        function Marquee(){
            if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
                scroll_div.scrollLeft-=scroll_begin.offsetWidth;
            else
                scroll_div.scrollLeft++;
        }
        MyMar=setInterval(Marquee,speed);//给上面的方法设置时间  setInterval
        //鼠标点击这条公告栏的时候,清除上面的方法,让公告栏暂停
        scroll_div.onmouseover = function(){
            clearInterval(MyMar);
        }
        //鼠标点击其他地方的时候,公告栏继续运动
        scroll_div.onmouseout = function(){
            MyMar = setInterval(Marquee,speed);
        }
    }
    ScrollImgLeft();
</script>

弊端:因为这样实现的原理是两个div来换切换,如果公告条内容过短,滚动可能会只持续一段时间就暂停,想要可以一直滚动,可以修改结束div,把结束div加长.

scroll_end.innerHTML = scroll_begin.innerHTML+ scroll_begin.innerHTML+scroll_begin.innerHTML+scroll_begin.innerHTML+scroll_begin.innerHTML;