Animation: display information one by one (three) in the window, switch information by seamless scrolling, stop scrolling when the mouse selects the message, and continue scrolling when the mouse moves away.
Implementation method:
Through the animation () animation, the information flow is moved up a row of information, the first information is moved to the end of the information flow, and then the margin top is reset to realize the information flow scrolling. See the code below for details.
jQuery method: animate(), first(), appentTo(), css()
Animation effect:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Seamless rolling</title>
<script type="text/javascript" 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="#> Xi Jinping time: General Secretary of national fitness is very concerned about </a></li>.
<li><a href="#A key point is to grasp the theoretical essentials of Xi Jinping's diplomatic thoughts </a></li>
<li><a href="#"> commentator of Xinhua News Agency: stepping on the rough road</a></li>
<li><a href="#"> decode six details of the market environment in the first half of 2018 China Economic semiannual report</a></li>
<li><a href="#"> 60% law behind Sino US trade friction</a></li>
</ul>
</div>
<script>
$(document).ready(function () {
var height=$("ul li").first().innerHeight();
//Rolling function
function roll(){
$("ul").animate({marginTop:-height},1000,function () {
$("ul li").first().appendTo($("ul"));//Transfer the information of the first message (which has been moved out of the display area) to the end of all messages
$("ul").css("marginTop",0);//
});
}
var ani=setInterval(roll,1000);
//Add a mouse in event. If the mouse selects a message, stop scrolling and modify the style of the message
$("ul li").mouseenter(function(){
clearInterval(ani);
$(this).addClass("selected");
});
$("ul li").mouseleave(function(){
ani=setInterval(roll,1000);
$(this).removeClass("selected");
});
})
</script>
</body>
</html>