jquery 表格自动滚动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。表格自动滚动是指在一个网页中，表格内容能够自动从上到下或从下到上滚动显示。

类型

垂直滚动：表格内容从上到下或从下到上滚动。
水平滚动：表格内容从左到右或从右到左滚动。

应用场景

实时数据展示：在金融、股票等实时数据展示中，表格自动滚动可以持续显示最新的数据。
广告轮播：在网站首页或页面的某个位置，使用表格自动滚动展示广告。
新闻滚动：在新闻网站或应用中，使用表格自动滚动展示最新的新闻内容。

实现方法

以下是一个简单的示例代码，展示如何使用 jQuery 实现表格内容的垂直自动滚动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Table Auto Scroll</title>
    <style>
        #scrollTable {
            width: 100%;
            overflow: hidden;
            position: relative;
            height: 200px;
        }
        #scrollTable table {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="scrollTable">
        <table border="1">
            <tr><td>Row 1</td></tr>
            <tr><td>Row 2</td></tr>
            <tr><td>Row 3</td></tr>
            <tr><td>Row 4</td></tr>
            <tr><td>Row 5</td></tr>
        </table>
    </div>

    <script>
        $(document).ready(function() {
            var $table = $('#scrollTable table');
            var tableHeight = $table.height();
            var scrollSpeed = 50; // 滚动速度，单位为毫秒

            function scrollTable() {
                $table.animate({ top: -tableHeight }, scrollSpeed, 'linear', function() {
                    $table.css('top', 0);
                    scrollTable();
                });
            }

            scrollTable();
        });
    </script>
</body>
</html>