美文网首页Web前端开发
2019-06-04 JavaScript 实现表头不动,表内容

2019-06-04 JavaScript 实现表头不动,表内容

作者: 雨笋情缘 | 来源:发表于2019-06-04 11:06 被阅读2次
    Scroll动态图展示滚动效果

    <!DOCTYPE html>

    <html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>

        <script type="text/javascript"> 

            $.fn.infiniteScrollUp = function () {

                var self = this, kids = self.children()

                kids.slice(20).hide();

                setInterval(function () {

                    kids.filter(':hidden').eq(0).fadeIn();

                    kids.eq(0).fadeOut(function () {

                        $(this).appendTo(self)

                        kids = self.children();

                    });

                }, 1500);

                return this

            }

            $(function () {

                $('tbody').infiniteScrollUp();

            }) 

        </script>

        <title>infiniteScrollUp</title>

    </head>

    <body>

        <table border="1" width="400">

            <colgroup>

                <col />

                <col />

                <col />

                <col />

                <col />

                <col />

            </colgroup>

            <thead>

                <tr>

                    <th>a</th>

                    <th>b</th>

                    <th>c</th>

                    <th>d</th>

                    <th>e</th>

                    <th>f</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>1a</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1b</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1c</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1d</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1e</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1f</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1g</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1h</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1i</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1j</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1k</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1l</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1m</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1n</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1o</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1p</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1q</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1r</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1s</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1t</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1u</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1v</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1w</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1x</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1y</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

                <tr>

                    <td>1z</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td>5</td>

                    <td>6</td>

                </tr>

            </tbody>

        </table>

    </body>

    </html>

    转自:https://sheng.iteye.com/blog/1850184

    相关文章

      网友评论

        本文标题:2019-06-04 JavaScript 实现表头不动,表内容

        本文链接:https://www.haomeiwen.com/subject/bsxlxctx.html