文档章节

table数据跑马灯效果

o
 osc_odyg6b92
发布于 2018/07/13 14:48
字数 525
阅读 44
收藏 0
red

行业解决方案、产品招募中!想赚钱就来传!>>>

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

 

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CDH5: 使用parcels配置lzo

一、Parcel 部署步骤 1 下载: 首先需要下载 Parcel。下载完成后,Parcel 将驻留在 Cloudera Manager 主机的本地目录中。 2 分配: Parcel 下载后,将分配到群集中的所有主机上并解压缩。 3 激...

cloud-coder
2014/07/01
6.8K
1
数据库代码辅助工具--MaoCaiJun.Database

MaoCaiJun.DataBase 是一个用于 Microsoft Visual Studio 的数据库代码生成组件。它是基于 xml 文件的代码创建工具,支持sql2000,sql2005,sql2008,access, SQLite MaoCaiJun.Database 数据库...

mccj
2013/02/06
2.2K
1
开源数据访问组件--Smark.Data

Smark.Data是基于Ado.net实现的数据访问组件,提供基于强类型的查询表达式进行灵活的数据查询,统计,修改和删除等操作;采用基于条件驱动的操作模式,使数据操作更简单轻松;内部通过标准SQL...

泥水佬
2013/03/12
2.5K
0
视图各种动画效果

自定义视图变换的各种动画效果。其中包括:CALayer、UIViewAnimation、CATransition、CABasicAnimation、CAKeyframeAnimation、CAAnimationGroup、CATransform3D各个知识点实现的动画效果,实...

匿名
2013/03/21
1.4K
0
数据中心生命周期管理--Foreman

Foreman是一个集成的数据中心生命周期管理工具,提供了服务开通,配置管理以及报告 功能,和Puppet Dahboard一样,Foreman也是一个Ruby on Rails程序.Foreman和 Dashboard不同的地方是在于,Fore...

匿名
2012/10/24
1.5W
0

没有更多内容

加载失败,请刷新页面

加载更多

Vim清除最后一个搜索突出显示 - Vim clear last search highlighting

问题: Want to improve this post? 想要改善这篇文章吗? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. 提供此问题......

技术盛宴
35分钟前
13
0
原子属性和非原子属性有什么区别? - What's the difference between the atomic and nonatomic attributes?

问题: What do atomic and nonatomic mean in property declarations? 属性声明中atomic和nonatomic是什么意思? @property(nonatomic, retain) UITextField *userName;@property(atomic, ......

fyin1314
今天
7
0
马化腾每天刷 Leetcode?代码你打算写到几岁?

本文作者:o****0 前几天,一张未证真伪的截图流传,图中显示马化腾几乎每天都会在 Leetcode 上提交代码。 截图还贴出一个 Leetcode 账户地址。该地址的头像已从马化腾的照片换成腾讯 logo,...

百度开发者中心
前天
13
0
滴滴 3000+ Kylin Cube 背后的实践经验揭秘

本次分享主要有三个部分:Kylin 在滴滴的整体应用、架构的实践经验、滴滴全局字典最新版本的实现以及 Kylin 最新实时 OLAP 探索经验分享。 Kylin 在滴滴的应用&架构 Kylin 在滴滴的三类应用场...

浪尖聊大数据
昨天
9
0
ssh“权限太开放”错误 - ssh “permissions are too open” error

问题: I had a problem with my mac where I couldn't save any kind of file on the disk anymore. 我的Mac出现问题,无法再在磁盘上保存任何类型的文件。 I had to reboot OSX lion and r......

javail
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部