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：
<div id="scrollMessage">
<ul class="text-overflow-hidden">
<li >优秀阅读社区等图书采购项目第三次询价采购成交结果公告</li>
<li >优秀阅读社区等图书采购项目第一次询价采购流标公告</li>
<li >图书城空置使用权租赁招租项目流标公告</li>
<li >美术馆保洁服务项目成交结果公示</li>
<li >美术馆保洁服务项目流标公告</li>
</ul>
</div>
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);
