table数据跑马灯效果

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、效果图

table数据跑马灯效果的更多相关文章

黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果一.总结一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
vue学习第二天：Vue跑马灯效果制作
分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...
TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
Android_TextView之跑马灯效果
对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...
android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
Android 实现多行文本跑马灯效果
Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...
android:ellipsize实现跑马灯效果总结（转）
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...
flex 简单跑马灯效果（竖着显示）
<mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...

随机推荐

YUV图像合成原理<转>
YUV图像合成原理引言:在视频监控中最常用的就是图像拼接和字符叠加,25FPS的视频流,如果每隔40MS就从各个通道中取一幅图像来合成,则可以看到一个实时的合成视频.合成的过程也就是原始图像的拼接. ...
SpringMVC 配置多个dispatcher 及WebApplicationInitializer的使用
SpringMVC 在配置多个dispatcher时,一般可以如下配置:  <servlet> <servlet-nam ...
【LA3713 训练指南】宇航员分组【2-sat】
题意有A,B,C三个任务要分配给n个宇航员,其中每个宇航员恰好要分配一个任务.设所有n个宇航员的平均年龄为x,只有年龄大于或等于x的宇航员才能分配任务A:只有年龄严格小于x的宇航员才能分配任务B,而 ...
554. Brick Wall最少的穿墙个数
［抄题］: There is a brick wall in front of you. The wall is rectangular and has several rows of bricks. ...
sqlserver镜像相关资料
本文出处:http://blog.csdn.net/dba_huangzj/article/details/35995083 镜像(Mirroring) SQL Server镜像简介计划搭建SQL ...
Linux route
一.简介 Linux系统的route命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需要一台连接两个网络的 ...
用 python 实现各种排序算法-乾颐堂
总结了一下常见集中排序的算法归并排序归并排序也称合并排序,是分治法的典型应用.分治思想是将每个问题分解成个个小问题,将每个小问题解决,然后合并. 具体的归并排序就是,将一组无序数按n/2递归分解成 ...
Flask框架之信号
Flask框架中的信号基于blinker,其主要就是让开发者可是在flask请求过程中定制一些用户行为. 安装 pip3 install blinker 内置信号 request_started = ...
java 获取获取某年某月所有日期（yyyy-mm-dd格式字符串）
总结一些日期常用的代码,方便以后直接拿 <code> /** * java 获取获取某年某月所有日期(yyyy-mm-dd格式字符串) * @param year * @param m ...
关于更新vs2017后发布的问题命令“bower install”已退出，代码为 9009
更新vs2017 尝试发布出现命令“bower install”已退出,代码为 9009 然后我点工具测试了一下nodejs 出现下图弹窗百度了一下没找到对策,有没有大侠知道怎么解决解决 ...

table数据跑马灯效果

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

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

3、效果图

table数据跑马灯效果的更多相关文章

随机推荐

热门专题