前提 需要引入jquery 如果你用的单位不是px 修改的同时红色部分需保持一致
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>上下滚动公告栏</title> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> *{ margin: 0px; padding: 0px; } ul { list-style: none; margin: 0; } li { padding: 5px; } .notice { position: relative; height: 26px; overflow: hidden; } </style> </head> <body> <div class="notice"> <ul class="ul-list"> <li>就算没有人喜欢你 也并不表你不好</li> <li>你要等</li> <li>在未来的某一天</li> <li>有一个人会对你说喜欢你</li> <li>在此前你要先学会好好爱自己</li> <li>陆筱璟</li> </ul> </div> </body> <script type="text/javascript"> $(function() { var num = $(".ul-list").find("li").length; if (num > 1) { setInterval(function() { $(".ul-list").animate( { marginTop: "-26px" }, 500, function() { $(this) .css({ marginTop: "0" }) .find("li:first") .appendTo(this); } ); }, 3000); } }); </script> </html>