table数据跑马灯效果

最新推荐文章于 2021-11-29 16:45:00 发布
最新推荐文章于 2021-11-29 16:45:00 发布
阅读量303 收藏 1
点赞数
原文链接：http://www.cnblogs.com/MirZhai/p/9304907.html
版权

1、使用marquee标签实现普通文本字符串跑马灯效果。

<marquee behavior="scroll" scrollamount="3" style="background: turquoise;color: red;margin: 0px;padding: 10px;">我左右滚动</marquee>
<marquee behavior="scroll" scrollamount="2" direction="up" style="background: turquoise;color: red;margin: 0px;padding: 10px;">我上下滚动</marquee>

 

更多的marquee标签使用参考博客https://www.cnblogs.com/MirZhai/p/9305002.html。

2、实现table数据跑马灯效果，表头不动，表数据不断向上滚动，头尾数据相连

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑马灯table</title>
</head>
<style>
    th,td {
        padding: 5px;
        text-align: center;
    }
</style>
<body>
    <marquee behavior="scroll" scrollamount="3" style="background: turquoise;color: red;margin: 0px;padding: 10px;">我左右滚动</marquee>
    <marquee behavior="scroll" scrollamount="2" direction="up" style="background: turquoise;color: red;margin: 0px;padding: 10px;">我上下滚动</marquee>
    <table width="256" style="background: turquoise;">
            <thead>
                <tr>
                    <th width="80%">详情</th>
                    <th>编号</th>
                </tr>
            </thead>
        </table>
        <table style="width:256px;margin-left: -7px;margin-top: -7PX;">
            <tr>
                <td align="center">
                    <div id=rolllinkk style="OVERFLOW: hidden; WIDTH: 256px; HEIGHT: 200px">
                        <div id=rolllinkk1>
    
                            <!-- 下面是你要显示的内容 -->
                            <table width="100%" cellpadding="2" style="background: lightcyan">
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 1</td>
                                    <td>1</td>
                                </tr>
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 2</td>
                                    <td>2</td>
                                </tr>
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 3</td>
                                    <td>3</td>
                                </tr>
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 4</td>
                                    <td>4</td>
                                </tr>
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 5</td>
                                    <td>5</td>
                                </tr>
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 6</td>
                                    <td>6</td>
                                </tr>
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 7</td>
                                    <td>7</td>
                                </tr>
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 8</td>
                                    <td>8</td>
                                </tr>
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 9</td>
                                    <td>9</td>
                                </tr>
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 11</td>
                                    <td>11</td>
                                </tr>
    
                                <tr>
                                    <td align="center" width="80%">最牛交通工具 12</td>
                                    <td>12</td>
                                </tr>
    
                            </table>
                            <!-- 显示的内容结束！ -->
    
                        </div>
                        <div id=rolllinkk2>
                            <div align=center> </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <script>
            var rollspeed = 30
            rolllinkk2.innerHTML = rolllinkk1.innerHTML //
            function Marquee1() {
                if (rolllinkk2.offsetTop - rolllinkk.scrollTop <= 0) //
                    rolllinkk.scrollTop -= rolllinkk1.offsetHeight //
                else {
                    rolllinkk.scrollTop++
                }
            }
            var MyMar1 = setInterval(Marquee1, rollspeed) //
            rolllinkk.onmouseover = function () {
                clearInterval(MyMar1)
            }
            rolllinkk.onmouseout = function () {
                MyMar1 = setInterval(Marquee1, rollspeed)
            }
        </script>
</body>
</html>

3、效果图

 

转载于:https://www.cnblogs.com/MirZhai/p/9304907.html

weixin_30642869
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
跑马灯大合集（上下左右）
10-12
jQuery跑马灯合集；
table跑马灯效果,从下往上方向
前端那些事
08-02 1995
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
html 跑马灯
qq_38730338的博客
10-30 205
废话不多说，直接代码copy进去运行就知道了 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> .page_...
html 跑马灯效果 源代码,跑马灯效果.html
weixin_30769833的博客
06-03 938
跑马灯效果table .pao {border: 1px solid #e5e5e5;padding: 10px 20px;}table .on {border-color: red;color: red;}window.onload = function() {var paomadeng = {currentIndex: 1, //当前索引indexCount: 12, //个数timer: 0...
HTML 跑马灯效果
qq_36935391的博客
08-10 3524
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>跑马灯效果</title> <style type="text/css"> * { margin: 0; padding: 0;
vue 实现走马灯效果
12-30
在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果 Part.2 实现 我的做法：利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 Part.3 代码 HTML <ul class...
跑马灯效果
02-20
支持上下左右滚动 定时停止滚动纯js 使用是在外面添加table
Javascript实现跑马灯效果的简单实例
01-19
页面html： <table cellspacing=0 cellpadding=0 align=left border=0 cellspace=0> <tr>
JS代码实现table数据分页效果
11-24
　效果图： •这是HTML代码，很简单滴（我好像看到了被嫌弃的小眼神） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-"> [removed][removed] [removed][removed] <link ...
教你如何使用跑马灯，让文字跑起来，让数据可视化大屏动起来
迪赛智慧数的博客
11-29 1431
大家知道，在日常的工作汇报中，将采集到的数据信息进行统计、分析，再将数据用图形的方式表达出来，会方便我们对数据的把控，更直观的了解到数据背后的情况。而且相对于枯燥的文字，一些有视觉冲击的事物能让人印象更深。请看以下公司销售情况大屏： 这个数据可视化大屏是由一个个简单的表格、折线图、文字、数字、地图等组成，不知道大家有没有注意到大屏中“销售额分布”和“最新销售动态”的动态效果。 这两个模块中的文字都是滚动显示的，“销售额分布”的滚动方向是向左，也是日常最常见的滚动方式；“最新销售动态”的滚动方式是向上
HTML+CSS制作的个人博客网页.zip
最新发布
05-22
如标题所述，内有详细说明
基于MATLAB实现的SVC PSR 光谱数据的读入，光谱平滑，光谱重采样，文件批处理；+使用说明文档.rar
05-22
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的SVC PSR 光谱数据的读入，光谱平滑，光谱重采样，文件批处理；+使用说明文档.rar 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！
基于MATLAB实现的有限差分法实验报告用MATLAB中的有限差分法计算槽内电位+使用说明文档
05-22
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的有限差分法实验报告用MATLAB中的有限差分法计算槽内电位；对比解析法和数值法的异同点；选取一点，绘制收敛曲线；总的三维电位图+使用说明文档 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！
gara.ttf，字体下载
05-22
gara.ttf字体下载
Java_Termux是Android操作系统的终端仿真应用程序，可通过各种包进行扩展.zip
05-22
Java_Termux是Android操作系统的终端仿真应用程序，可通过各种包进行扩展
基于MATLAB实现的迪杰斯特拉算法求最短路径MATLAB实现的实现算法+使用说明文档.rar
05-22
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的迪杰斯特拉算法求最短路径MATLAB实现的实现算法+使用说明文档.rar 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！
基于MATLAB实现的语音信号声源定位DOA估计所用的一些传统算法+使用说明文档.zip
05-22
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 基于MATLAB实现的语音信号声源定位DOA估计所用的一些传统算法+使用说明文档.zip 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2020b；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细）； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可后台私信博主； 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载，沟通交流，互相学习，共同进步！
证券行业周报监管层积极求变未来改革政策值得期待.pdf
05-22
证券行业周报监管层积极求变未来改革政策值得期待.pdf
html table实现数据滚动效果
03-09
可以使用CSS的overflow属性来实现数据滚动效果，将表格包裹在一个固定高度的div中，设置overflow属性为auto或scroll即可。例如： ; overflow: auto;"> <table> <!-- 表格内容 --> </table> </div>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值