动画：在窗口逐条（三条）显示信息，通过无缝滚动方式切换信息，当鼠标选中消息时停止滚动，鼠标移开时继续滚动。
实现方法：
通过animate()动画将信息流的向上移动一条信息的行高，并将第一条信息移至信息流的结尾，然后重置margin-top来实现信息流滚动，详见下方代码。
jQuery方法：animate(), first(), appentTo(), css()
动画效果：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<script src="D:\jQuery/jquery-3.3.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin: 50px auto;
width: 600px;
height: 90px;
border: 1px solid black;
overflow: hidden;
}
ul li{
padding: 5px;
width: 100%;
height: 20px;
}
a {
text-decoration: none;
color: black;
}
.selected a{
background: grey;
color: white;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">习近平时间：全民健身 总书记很关心</a></li>
<li><a href="#">划重点 一文掌握习近平外交思想的理论要义</a></li>
<li><a href="#">新华社评论员：踏平坎坷成大道</a></li>
<li><a href="#">解码上半年市场环境 2018中国经济半年报的6个细节</a></li>
<li><a href="#">中美贸易摩擦背后的60%定律</a></li>
</ul>
</div>
<script>
$(document).ready(function () {
var height=$("ul li").first().innerHeight();
//滚动函数
function roll(){
$("ul").animate({marginTop:-height},1000,function () {
$("ul li").first().appendTo($("ul"));//将第一条信息（已经移到显示区外）的信息转移到所有信息的结尾
$("ul").css("marginTop",0);//
});
}
var ani=setInterval(roll,1000);
//添加鼠标进入事件，如果鼠标选中某条信息，则停止滚动并修改该信息的样式
$("ul li").mouseenter(function(){
clearInterval(ani);
$(this).addClass("selected");
});
$("ul li").mouseleave(function(){
ani=setInterval(roll,1000);
$(this).removeClass("selected");
});
})
</script>
</body>
</html>
来源：CSDN
作者：willard_cui
链接：https://blog.csdn.net/willard_cui/article/details/81545692