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数据跑马灯效果的更多相关文章

  1. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  2. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  3. vue学习第二天：Vue跑马灯效果制作

    分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...

  4. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

  5. Android_TextView之跑马灯效果

    对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...

  6. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  7. Android 实现多行文本跑马灯效果

    Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...

  8. android:ellipsize实现跑马灯效果总结（转）

      最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...

  9. flex 简单跑马灯效果（竖着显示）

    <mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...

随机推荐

  1. Linux 环境下wordpress后台安装主题及插件需要FTP帐号怎么办？

    vi httpd.conf 查看user是哪个用户  我的是daemon 然后执行 chown daemon:daemon -R /data/wordpress /data/wordpress 是我的 ...

  2. C语言清空输入缓冲区的N种方法对比(转)

    C语言中有几个基本输入函数: //获取字符系列 int fgetc(FILE *stream); int getc(FILE *stream); int getchar(void); //获取行系列 ...

  3. 谈谈跨平台的app开发 坚定的选择了flutter

    目前市场上,(市场也许用的不对),比较常见的技术有xamrin.RN.Flutter,确切的说flutter是后起之秀,笔者也是最近才开始学习,xamrin是微软系的技术,笔者也很早就开始学习了,RN ...

  4. python：ord()和chr()——字符串和ASCll编码转换

    ord()函数:字符串——>ascll编码 chr()函数:ascll编码——>字符串 #函数 for i in range(ord('d'),ord('f')+1):#拿到d和f对应的a ...

  5. Python 多人聊天工具 ( 多线程 )

    程序实现: 1.单或多客户端使用 telnet 登陆服务端 ( 可远程 ) 进行会话 2.服务端实现登陆.注册.退出功能 3.客户端发送的消息会被广播到已经登陆的其他用户界面 4.连接到服务端后,可以 ...

  6. 【codevs3160】 LCS 【后缀自动机】

    题意 给出两个字符串,求它们的最长公共子串. 分析 后缀自动机的基础应用. 比如两个字符串s1和s2,我们把s1建为SAM,然后根据s2跑,找出s2每个前缀的最长公共后缀. 我们可以理解为,当向尾部增 ...

  7. 刷题向》关于一道尺取法的神题目(BZOJ4653)(HARD-)(BZOJ 30题纪念)

    不得不说,这也许会是一道长期在我的博客里作为“HARD”难度存在的题 这道题能很好的考验选手的思考能力,但本蒟蒻最后还是听了省队爷讲了之后才会...(默默面壁) 题目里,说对于每一个点,是用当前选出的 ...

  8. HRESULT:0x80070057 (E_INVALIDARG)

    笔记本蓝屏后,在vs2010中调试项目时出现该异常, 解决方法:清空C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Fi ...

  9. Lunix7 开放指定端口

    systemctl unmask firewalld.service 此时可以正常启动Firewall了. 接下来顺便讲述一下Firewall的安装,及一些简单配置.   查看状态,看电脑上是否已经安 ...

  10. 20. Valid Parentheses检验括号字符串的有效性

    ［抄题］: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if th ...