制作滚动表格，使用jQuery方法

已于 2022-08-14 22:35:45 修改
阅读量1k 收藏
点赞数 1
文章标签： jquery 前端
于 2022-08-14 22:32:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58544706/article/details/126337566
版权

制作滚动表格

三个学习点：jQuery

      

用Vscode编写代码

滚动起来的两种思路

思路一： 准备两个相连的相同文本，文本滚动，当第一个文本滚动消失后，瞬间回到初始位置，重新滚动第一个文本。

思路一核心代码：

function scroll() {

                // 第一个文本全部滚动完后，回到原位

                if (tab2.offsetTop - box2.scrollTop <= 0) {

                    box2.scrollTop = 0;

                }

                // 第一个文本若没有全部滚动完，则继续滚动

                else {

                    box2.scrollTop += 2;

                }

                // 滚动状态，滚动时为1，停止为0

                scrollkey = 1;

            }

scrollTop：元素高度（200px）小于元素内容（300px）时

拉到最底下会有隐藏部分（100px）

scrollTop=100px

制作中遇到的问题和经验：

1.按钮部分

style="clear:both"

前面的元素浮动，使用这行代码可以不与之前平齐，不受前面后面元素的浮动影响

2.按钮居中

代码：

        /* 设置按钮容器样式 */

        #btn10 {

            width: 700px;

            margin: 0px auto;

        }

        /* 设置按钮居中 */

        #btn20{

            margin: 0px 260px;

        }

        /* 按钮样式 */

        .btn{

            width: 60px;

            height: 50px;

            float: left;（使按钮间无间隙）

        }

<div id="btn10" style="clear:both">

    <div id="btn20">

        <button id="btn1" class="btn">开始</button>

        <button id="btn2" class="btn">暂停</button>

        <button id="btn3" class="btn">重置</button>

    </div>

</div>

给按钮部分一个大容器，里面装一个小容器，小容器里放三个按钮

大容器用margin: 0px auto;居中

小容器margin: 0px 260px;居中，这个时候就可以用具体数值设置居中

代码：

代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动表格</title>

    <style>
        /* 设置表格整体的宽度，居中，背景色 */
        .box,
        .box1,
        .box2,
        .tab1,
        .tab2 {
            width: 700px;
            margin: 100px auto;
            margin-bottom: 0px;
            background-color: aliceblue;
        }

        /* 表格居中(去除上外边框影响) */
        .box,
        .box2,
        .tab1,
        .tab2 {
            margin-top: 0px;
        }

        /* 表头样式 */
        .box1 {
            border-top: 1px black solid;
            border-left: 1px black solid;
            position: relative;
            float: left;
            /* border-right: 1px black solid; */
        }

        /* 表格容器样式 */
        .box2 {
            height: 456px;
            overflow: hidden;
            position: relative;
            border-left: 1px black solid;
            float: left; 
            /* border-right: 1px black solid; */
        }

        /* 文本一样式 */
        .tab1 {
            position: relative;
            float: left;
        }

        /* 文本二样式 */
        .tab2 {
            position: relative;
            float: left;/* 不浮动无法滚动 */
        }

        /* 设置按钮容器样式 */
        #btn10 {
            width: 700px;
            margin: 0px auto;
        }

        /* 设置按钮居中 */
        #btn20 {
            margin: 0px 260px;
        }

        /* 按钮样式 */
        .btn {
            width: 60px;
            height: 50px;
            float: left; /* 去除按钮间隙 */
        }

        /* 文本每行样式 */
        .box1 span,
        .box2 span {
            float: left;/* 浮动去除span间的间隙 */
            border: 1px black solid;
            text-align: center;
            height: 55px; /* 垂直居中 */
            line-height: 55px; /* 垂直居中 */
        }
    </style>

</head>

<body>

    <div id="box" class="box">

        <div id="box1" class="box1">

            <div>
                <span>编号</span>
                <span>姓名</span>
                <span>年龄</span>
                <span>地址</span>
            </div>

        </div>


        <div id="box2" class="box2">

            <div id="tab1" class="tab1">

                <div>
                    <span>0001</span>
                    <span>小兰</span>
                    <span>10</span>
                    <span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
                </div>

                <div>
                    <span style="clear:both">0002</span>
                    <span>园子</span>
                    <span>20</span>
                    <span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
                </div>

                <div>
                    <span>0003</span>
                    <span>张三</span>
                    <span>30</span>
                    <span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
                </div>

                <div>
                    <span>0004</span>
                    <span>李四</span>
                    <span>40</span>
                    <span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
                </div>

                <div>
                    <span>0005</span>
                    <span>王五</span>
                    <span>50</span>
                    <span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
                </div>

                <div>
                    <span>0006</span>
                    <span>王六</span>
                    <span>60</span>
                    <span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
                </div>

                <div>
                    <span>0007</span>
                    <span>吴七</span>
                    <span>70</span>
                    <span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
                </div>

                <div>
                    <span>0008</span>
                    <span>king</span>
                    <span>80</span>
                    <span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
                </div>

                <div>
                    <span>0009</span>
                    <span>queen</span>
                    <span>90</span>
                    <span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
                </div>

                <div>
                    <span>0010</span>
                    <span>Jack</span>
                    <span>100</span>
                    <span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
                </div>

            </div>

            <div id="tab2" class="tab2">

                <div>
                    <span>0001</span>
                    <span>小兰</span>
                    <span>10</span>
                    <span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
                </div>

                <div>
                    <span>0002</span>
                    <span>园子</span>
                    <span>20</span>
                    <span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
                </div>

                <div>
                    <span>0003</span>
                    <span>张三</span>
                    <span>30</span>
                    <span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
                </div>

                <div>
                    <span>0004</span>
                    <span>李四</span>
                    <span>40</span>
                    <span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
                </div>

                <div>
                    <span>0005</span>
                    <span>王五</span>
                    <span>50</span>
                    <span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
                </div>

                <div>
                    <span>0006</span>
                    <span>王六</span>
                    <span>60</span>
                    <span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
                </div>

                <div>
                    <span>0007</span>
                    <span>吴七</span>
                    <span>70</span>
                    <span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
                </div>

                <div>
                    <span>0008</span>
                    <span>king</span>
                    <span>80</span>
                    <span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
                </div>

                <div>
                    <span>0009</span>
                    <span>queen</span>
                    <span>90</span>
                    <span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
                </div>

                <div>
                    <span>0010</span>
                    <span>Jack</span>
                    <span>100</span>
                    <span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
                </div>

            </div>

        </div>

    </div>

    <div id="btn10" style="clear:both">

        <div id="btn20">
            <button id="btn1" class="btn">开始</button>
            <button id="btn2" class="btn">暂停</button>
            <button id="btn3" class="btn">重置</button>
        </div>

    </div>








    <script src="./jquery-1.12.3.js"></script>
    <script>

        // 修改每一列span的宽度
        $('span:nth-child(1)').css('width', '80');
        $('span:nth-child(2)').css('width', '80');
        $('span:nth-child(3)').css('width', '80');
        $('span:nth-child(4)').css('width', '452');

        // 修改文本每一列span的字体颜色
        $('#box2 span:nth-child(1)').css('color', 'rgba(112, 23, 23, 0.632)');
        $('#box2 span:nth-child(2)').css('color', 'rgba(99, 23, 116, 0.732)');
        $('#box2 span:nth-child(3)').css('color', 'rgba(67,43, 111, 0.581)');
        $('#box2 span:nth-child(4)').css('color', 'rgba(0,0, 0, 0.9)');

        /* 改变两个文本偶数行背景颜色 */
        $('#tab1 div:nth-child(2n) span').css('background', 'blanchedalmond');
        $('#tab2 div:nth-child(2n) span').css('background', 'blanchedalmond');

        var timer;//计时器

        // 滚动状态：表格滚动时scrollkey为1，静止时scrollkey为0
        var scrollkey = 0;

        // 点击状态：点击开始按钮后starkey为1，点击结束按钮时starkey为0
        var starkey = 0;

        // 滚动方法
        function scroll() {
            // 第一个文本全部滚动完后，两个文本回到原位
            if (tab2.offsetTop - box2.scrollTop <= 0) {
                box2.scrollTop = 0;
            }
            // 第一个文本没有全部滚动完，则继续滚动
            else {
                box2.scrollTop += 1;
            }

            // 滚动状态，滚动时为1，停止为0
            scrollkey = 1;
        }

        // 点击开始按钮（btn1），表格开始滚动
        $('#btn1').click(function () {

            // 停止状态时点击开始按钮，才有对应的开始动作
            if (starkey == 0 && scrollkey == 0) {
                starkey = 1;
                timer = setInterval(scroll, 10);
                scrollkey = 1;

                // 鼠标移入表格，表格停止滚动
                box2.onmouseover = function () {
                    clearInterval(timer);
                    scrollkey = 0;
                }
                
                // 鼠标移出表格，表格开始滚动
                box2.onmouseout = function () {
                    if (starkey == 1) {
                        timer = setInterval(scroll, 10);
                        scrollkey = 1;
                    }
                }

            }
        })

        // 点击暂停按钮（btn2），表格停止滚动
        $('#btn2').click(function () {
            clearInterval(timer);
            scrollkey = 0;
            starkey = 0;
        })

        // 点击重置按钮（btn3），表格回到最初状态且停止滚动
        $('#btn3').click(function () {
            clearInterval(timer);
            box2.scrollTop = 0;
            starkey = 0;
            scrollkey = 0;
        })

    </script>

</body>

</html>

椎名真白樱
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【jQuery】实现列表滚动
Ai-Fairy的博客
09-05 1472
利用jQuery实现列表滚动效果。
jquery 表格自动滚动 类似于新闻
07-07
jquery 表格自动滚动 类似于新闻
使用jQuery实现列表循环滚动小技巧，2024年最新我总结了24家大厂100份面试题英文
最新发布
2401_84141332的博客
04-19 1037
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
jquery表格无缝滚动（轮播表格）
qq_41122834的博客
04-24 1945
HtmL <div style="height:320px;overflow:hidden"> <table id="tableId" class ='mytable1' style="table-layout:fixed; text-align: center;color:white; width: 100%;"> <thead> <tr > <th style="width:5%">序号</th>
jquery实现表格横向纵向滚动（横向滚动时左侧固定前几列）
farmerXU的博客
05-19 466
【代码】jquery实现表格横向纵向滚动（横向滚动时左侧固定前几列）
jQuery表格信息自动向上滚动代码.zip
01-11
jQuery表格自动向上滚动代码，鼠标悬浮停止，离开自动继续滚动 jQuery表格自动向上滚动代码，鼠标悬浮停止，离开自动继续滚动
jQuery表格顶部右侧固定滚动特效代码
03-20
本篇文章将详细讲解如何利用jQuery实现一个表格的顶部右侧固定滚动特效，以及相关的技术点。 首先，jQuery表格顶部右侧固定滚动特效的核心在于处理表格的布局和滚动事件。在传统的HTML表格中，当表格内容过宽时，...
jQuery制作网页表格数据优化插件.rar
10-01
《jQuery制作网页表格数据优化插件详解》 在网页开发中，数据展示是不可或缺的一环，尤其是对于数据量较大的表格，如何高效、美观地呈现这些信息成为了一个挑战。jQuery作为一个强大的JavaScript库，提供了丰富的...
jquery表格标题固定特效特效代码
03-20
"jquery表格标题固定特效代码"是针对使用jQuery来实现的一种功能，它旨在解决在大数据量表格中，当用户滚动页面时，表格的标题行和列头不再可见的问题。这种效果提高了用户体验，使用户始终能够清楚地看到当前查看的...
jQuery仿excel表格头部固定内容滚动效果代码
10-27
【jQuery仿Excel表格头部固定内容滚动效果代码】是一种在网页中实现类似电子表格的交互体验的技术，它使得用户在浏览长表格时，可以保持表头（即列标题）始终可见，即使当表格内容滚动时也是如此。这个功能在数据量...
基于jQuery实现可编辑的表格
10-15
在本文中，我们将深入探讨如何使用jQuery来实现一个可编辑的表格。jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。通过结合HTML、CSS和JavaScript，我们可以创建功能...
jQuery实现列表自动滚动循环滚动展示新闻
10-25
jQuery实现列表自动滚动循环滚动展示新闻，鼠标悬停时停止滚动并提示，离开后，继续滚动，实现的代码如下，需要的朋友可以看看
jquery.tablescroll.js
02-17
自动滚动!jquery.tablescroll.js
jq实现表格轮播滚动——技能提升
qq_37833745的博客
08-31 794
今天在做电视机的项目，除了单位要转为自适应的rem之外，还有一个点就是表格要实现轮播。 效果图如上，表格中是一条条的数据，需要实现表格中的数据向上滚动，每次滚动的就是一行数据的高度。 我的jq技能几乎忘光了，下面是附录代码： setInterval(timerFn,3000); function timerFn() { var scrollHeight = $(".order-table").find("tr").outerHeight(); $(".order-table").a.
jquery table数据自动滚动
hzm博客
06-26 1055
jquery table数据自动滚动
【JQuery】table 表格自动滚动的两种效果
新青年1号
09-09 2899
动态效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta h...
jquery 固定和滚动表格
wwttqq85538649的专栏
12-02 790
<br />http://jonsion.javaeye.com/blog/757300<br /> <br /> 
表格头部与左侧内容随滚动条位置改变而改变（基于jQuery）
weixin_30278311的博客
04-12 112
效果图如下： HTML代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
使用jQuery制作图片滚动栏
05-31
好的，以下是一个基于jQuery制作图片滚动栏的示例代码： HTML代码： ```html <div class="slider-item"><img src="image1.jpg"> <div class="slider-item"><img src="image2.jpg"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值