【JavaScript】文字滚动效果展示，用于信息提示

一、基础样式：

<style>
    .container{ width: 500px; margin: 60px auto; }
    .infoBox{ width:100%; height: 240px; overflow: hidden;}
    .list-group{ margin-bottom: 0; border-radius:0;}
    .list-group li{  border-radius:0 !important; }
    .list-group li:last-child{  border-bottom:0 !important; }
    a{
        text-decoration: none;
    }
</style>

二、html代码：

<div class="container">
    <div class="infoBox" id="infoBox">
        <ul class="list-group">
            <li class="list-group-item"><a href="#">1、关于2016年新生入学的通知01</a></li>
            <li class="list-group-item"><a href="#">2、关于2016年新生入学的通知02</a></li>
            <li class="list-group-item"><a href="#">3、关于2016年新生入学的通知03</a></li>
            <li class="list-group-item"><a href="#">4、关于2016年新生入学的通知04</a></li>
            <li class="list-group-item"><a href="#">5、关于2016年新生入学的通知05</a></li>
            <li class="list-group-item"><a href="#">6、关于2016年新生入学的通知06</a></li>
            <li class="list-group-item"><a href="#">7、关于2016年新生入学的通知01</a></li>
            <li class="list-group-item"><a href="#">8、关于2016年新生入学的通知02</a></li>
            <li class="list-group-item"><a href="#">9、关于2016年新生入学的通知03</a></li>
            <li class="list-group-item"><a href="#">10、关于2016年新生入学的通知04</a></li>
            <li class="list-group-item"><a href="#">11、关于2016年新生入学的通知05</a></li>
            <li class="list-group-item"><a href="#">12、关于2016年新生入学的通知06</a></li>
            <li class="list-group-item"><a href="#">13、关于2016年新生入学的通知01</a></li>
            <li class="list-group-item"><a href="#">14、关于2016年新生入学的通知02</a></li>
            <li class="list-group-item"><a href="#">15、关于2016年新生入学的通知03</a></li>
            <li class="list-group-item"><a href="#">16、关于2016年新生入学的通知04</a></li>
            <li class="list-group-item"><a href="#">17、关于2016年新生入学的通知05</a></li>
            <li class="list-group-item"><a href="#">18、关于2016年新生入学的通知06</a></li>
        </ul>
    </div>
</div>

三、JavaScript代码：

<script>
    window.onload=function(){
        var oInfobox=document.getElementById('infoBox');
        var speed=60;  //设置速度
        var timer=null; //设置定时器
        oInfobox.innerHTML+=oInfobox.innerHTML; //复制一份内容，无缝滚动
        timer=setInterval(scrollUp,speed);
        function scrollUp(){
            oInfobox.scrollTop=oInfobox.scrollTop+1;
            if(oInfobox.scrollTop>=oInfobox.offsetHeight){
                //判断元素的滚动高度大于元素本身的高度时，把滚动高度瞬间拉回
                oInfobox.scrollTop=0;
            }
        }
        oInfobox.onmouseover=function(){
            clearInterval(timer)
        }
        oInfobox.onmouseout=function(){
            timer=setInterval(scrollUp,speed);
        }
    }
</script>

效果：