前提 需要引入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>