利用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>
