<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动测试</title> <script src="https://code.jquery.com/jquery-3.7.0.min.js" crossorigin="anonymous"></script> </head> <body> <div class="dvScroll" style="height:210px;overflow-y: hidden;"> <div class="list_item">1测试文字测试文字测试文字测试文字测试文字测试文字</div> <div class="list_item">2测试文字测试文字测试文字测试文字测试文字测试文字</div> <div class="list_item">3测试文字测试文字测试文字测试文字测试文字测试文字</div> <div class="list_item">4测试文字测试文字测试文字测试文字测试文字测试文字</div> <div class="list_item">5测试文字测试文字测试文字测试文字测试文字测试文字</div> <div class="list_item">6测试文字测试文字测试文字测试文字测试文字测试文字</div> <div class="list_item">7测试文字测试文字测试文字测试文字测试文字测试文字</div> <div class="list_item">8测试文字测试文字测试文字测试文字测试文字测试文字</div> <div class="list_item">9测试文字测试文字测试文字测试文字测试文字测试文字</div> <div class="list_item">10测试文字测试文字测试文字测试文字测试文字测试文</div> <div class="list_item">11测试文字测试文字测试文字测试文字测试文字测试文</div> <div class="list_item">12测试文字测试文字测试文字测试文字测试文字测试文</div> <div class="list_item">13测试文字测试文字测试文字测试文字测试文字测试文</div> <div class="list_item">14测试文字测试文字测试文字测试文字测试文字测试文</div> <div class="list_item">15测试文字测试文字测试文字测试文字测试文字测试文</div> </div> </body> <script> $(function () { setInterval(function () { scroll($(".dvScroll"), 5) }, 2000); }) //数据滚动 function scroll(parent, maxCount) { var children = $(parent).children() if (children.length > maxCount) { var first = $(children).first(); var height = first.height() first.animate({ height: 0 }, 500, function () { $(parent).append(first.css('height', height)) }); } } </script> </html>
标签:文字,function,滚动,示例,height,html,测试,children,first From: https://www.cnblogs.com/5tomorrow/p/17605495.html