js realizes the function of text upward carousel

2021-07-10 18:47:58
OfStack
Without saying much, please look at the implementation code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 .lunbo{
 position: relative;
 width: 600px;
 height: 50px;
 border:1px solid red;
 overflow: hidden;
 }
 ul{
 position:absolute;
 left: 0;
 top:0;
 width: 600px;
 height: auto;
 }
 ul li{
 width: 600px;
 height: 50px;
 line-height: 50px;
 font-size:20px;
 color:#333;
 text-align: center
 }
 </style>
</head>
<body>
 <div class="lunbo">
 <ul>
 <li> You must be happy in life   And never tip his golden cup empty toward the moon </li>
 <li> I send my sorrow with the bright moon, and follow the wind until Yelangxi </li>
 <li> It's not that flowers prefer chrysanthemums, but this flower blooms without flowers </li>
 <li> Hard work 1 After the classics, the wars are sparse 4 Zhou Xing </li>
 <li> Like willow down the war-town land looks desolate; I sink or swim as duckweed in the rain appears. </li>
 <li> For the perils on Perilous Beach I have sighs, on Lonely Ocean now I feel dreary and lonely. </li>
 <li> As a man lives, so shall he die? I'd leave a loyalist's name in history only. </li>
 </ul>
 </div>
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
 function lunbo(id,height){
  var ul=$(id);
  var liFirst=ul.find('li:first');
  $(id).animate({top:height}).animate({"top":0},0,function(){
  var clone=liFirst.clone();
  $(id).append(clone);
  liFirst.remove();
  })
 }
 setInterval("lunbo('ul','-50px')",3000)
</script>
</body>
</html>