【js】无缝隙滚动

无缝隙滚动最后的效果图

以下为完整的代码：

    <div id="pdiv0" style="border: 1px solid #000; width: 500px; height: 192px; overflow: hidden;
        position: relative">
        <div id="pdiv1">
        <!-- cellpadding="0" cellspacing="0" 不能忘记，不然会滚到后来出现不对齐 -->
            <table cellpadding="0" cellspacing="0">
                <tr height="24">
                    <td>
                        1
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        2
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        3
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        4
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        5
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        6
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        7
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        8
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        9
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        10
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        11
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        12
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        13
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        14
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        15
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        18
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        19
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        20
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        21
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        22
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        23
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        24
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        25
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr height="24">
                    <td>
                        26
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
            </table>
        </div>
        <div id="pdiv2">
        </div>
    </div>
    <script>
        document.getElementById("pdiv2").innerHTML = document.getElementById("pdiv1").innerHTML; //克隆
        var t = setInterval(move, 1000);
        document.getElementById("pdiv0").onmouseover = function () { clearInterval(t); }
        document.getElementById("pdiv0").onmouseout = function () { t = setInterval(move, 1000); }
        function move() {
            //document.getElementById("pdiv2").offsetTop document.getElementById("pdiv1").offsetHeight这2个值是固定不变的
            //当滚动至demo1与demo2交界时
            if (document.getElementById("pdiv2").offsetTop - document.getElementById("pdiv0").scrollTop <= 0) {
                document.getElementById("pdiv0").scrollTop = 24;//tr的高度
            }
            else {
                document.getElementById("pdiv0").scrollTop = document.getElementById("pdiv0").scrollTop + 24;
            }

        }
    </script>