<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin:0;
padding:0;
}
ui,li {
list-style:none;
}
#news {
height:450px;
overflow:hidden;
width:300px;
border:solid 5px pink;
text-align:center;
background: url(../img/1.jpg);
}
</style>
<script src="../jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="news">
<ul>
<li>恭喜覃**获得法拉利一辆</li>
<li>恭喜黄**获得Sj戒指一枚</li>
<li>恭喜董**获得创口贴一箱</li>
<li>恭喜梁**获得哇哈哈一辆</li>
<li>恭喜蓝**获得感冒药一辆</li>
<li>恭喜蓝**获得感冒药一辆</li>
</ul>
</div>
<script>
$(function() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 100);
}).trigger("mouseleave");
function scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight + "px"
}, 500, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})
</script>
</body>
</html>
效果图如下:
