原生JS滚动通知

HTML

<div>
<ul class="ul" style="list-style: none;margin: 0;"> 
   <li>这是第一条公告</li>
     <li>这是第二条公告</li>
     <li>这是第三条公告</li>
<li>这是第四条公告</li>
     <li>这是第五条公告</li>
</ul>
</div>

 

JS

<script src="https://code.jquery.com/jquery-3.1.1.min.js">


</script>
<script>
$(function(){
var num=$(".ul").find("li").length;
console.log("直接运行"+num);
let h=-40
if (num>1) {
setInterval(function(){ 
$('ul').animate({
marginTop:h+'px'
},1000,function(){
h-=40
$(this).css({marginTop : "0"}).find("li:first").appendTo(this);
h=-40
});
}, 1000);//滚动速度
}
});
</script>

 CSS

<style>
div{
position: fixed;
background:blue;
height:40px;
overflow:hidden;
width:200px;

}
ul{
height:40px;
}
li{
margin-left:-40px;
background:red;
height:40px;
color:#ffffff;
text-align:center;
line-height:40px;
}
</style>