利用jQuery实现列表滚动效果
文章目录
- 一、展现效果
- 二、实现代码
- 1.html+css
- 2.js代码
一、展现效果
二、实现代码
1.html+css
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 300px;
height: 356px;
border: 1px solid;
margin: 0 auto;
position: relative;
overflow: hidden;
}
ul {
width: 100%;
background-color: lightblue;
position: absolute;
}
li {
list-style: none;
height: 50px;
border-bottom: 1px dotted;
text-align: center;
line-height: 50px;
}
p {
position: absolute;
border: 1px solid red;
}
</style>
</head>
<body>
<button>开始</button>
<div class="wrapper">
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
<li>黄磊</li>
<li>玛丽</li>
<li>多啦</li>
<li>琪琪</li>
</ul>
</div>
</body>
</html>
2.js代码
代码如下（示例）：
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function() {
play();
var id;
function play() {
id = setInterval(function() {
$("ul").animate({
"top": "-52px"
}, 1000, function() {
$(this).append($("li:first"));
$(this).css("top", "0")
});
}, 1500)
}
$(".wrapper").hover(
function() {
clearInterval(id)
},
function() {
play();
}
)
})
</script>
