表格轮播效果(表头固定,内容自下而上循环滚动)

<div class="b_right_box" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">

                    <h1 class="t_title">滚动表格样例</h1>

                            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="t_table">
                                <thead>
                                    <tr>
                                        <th width="16%">序号</th>
                                        <th width="25%">IP</th>
                                        <th width="35%">归属地</th>
                                        <th width="20%">访问量</th>
                                    </tr>
                                </thead>

                                <tbody id="box">

                                        <#list viewData_map.wla_mip_list as vml>
                                                    <tr >
                                                        <td >${vml_index+1}</td>
                                                        <td >${vml.name !}</td>
                                                        <td >${vml.region !}</td>
                                                        <td >${vml.pv !}</td>
                                                    </tr>
                                        </#list>

                                <tbody>

                            </table>


   
            </div>


<script language="JavaScript" type="text/javascript">
        window.onload = function () {
            var o = document.getElementById('box');

            window.setInterval(function () {
                scrollup(o, 24, 0);

            }, 3000)
        }
        ///滚动主方法
        ///参数:o 滚动块对象
        ///参数:d 每次滚屏高度
        ///参数:c 当前已滚动高度
        function scrollup(o, d, c) {
            if (d == c) {
                var t = getFirstChild(o.firstChild).cloneNode(true);
                o.removeChild(getFirstChild(o.firstChild));
                o.appendChild(t);
                t.style.marginTop = "0px";
            } else {
                c += 2;
                getFirstChild(o.firstChild).style.marginTop = -c + "px";
                window.setTimeout(function () {
                    scrollup(o, d, c)
                }, 20);
            }
        }

        //解决firefox下会将空格回车作为节点的问题
        function getFirstChild(node) {
            while (node.nodeType != 1) {
                node = node.nextSibling;
            }
            return node;
        }
    </script>

.b_right_box 中定义了作为div的宽和高,

style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" 超出div大小的内容隐藏

.t_table 为表格样式,可自由定义

table中放入需要展示的全部内容,将以逐行滚动的方式循环展示