h5 纵向滚动 跑马灯效果

CSS:

#scrollMessage {
    width: calc(100% - 85px);
    height: 30px;
    overflow: hidden;
    margin: auto;
    display: inline-block;
    vertical-align: middle;
}
#scrollMessage ul{
    margin: 0;
    padding: 0;
    width: 100%;
}
#scrollMessage ul li {
    list-style: none;
    float: left;
    height: 25px;
    display: block;
    margin: 0 5px;
    width: 100%;
}
// 超长部分 隐藏 显示点点点
.text-overflow-hidden {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

HTML：

    

        
优秀阅读社区等图书采购项目第三次询价采购成交结果公告
        
优秀阅读社区等图书采购项目第一次询价采购流标公告
        
图书城空置使用权租赁招租项目流标公告
        
美术馆保洁服务项目成交结果公示
        
美术馆保洁服务项目流标公告
    

JS：

function scroll() {
    $("#scrollMessage ul").animate({"margin-top":"-25px"}, 2500, 'linear', function() {
         $("#scrollMessage ul li").slice(0,1).appendTo($("#scrollMessage ul"));
         $("#scrollMessage ul").css({"margin-top": 0});
    });
}
var scrolling = setInterval(scroll, 5000);