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 ...
随机推荐
- 阻塞IO,非阻塞IO,异步IO和非异步IO 的区别
最近在研究java IO.NIO.NIO2(或者称AIO)相关的东西,有些概念还是要明确下. 按照<Unix网络编程>的划分,IO模型可以分为:阻塞IO.非阻塞IO.IO复用.信号驱动IO ...
- 常用经典SQL语句大全完整版--详解+实例 (存)
常用经典SQL语句大全完整版--详解+实例 转 傻豆儿的博客 http://blog.sina.com.cn/shadou2012 http://blog.sina.com.cn/s/blog_84 ...
- 编译boost.log模块遇到的一些问题
线上日志用到的是日志库,在全局有一个锁,导致在高并发的时候,容易因为锁竞争问题导致时延.在某些情况下,会因为同一个用户,同时访问某个变量,导致读写冲突使线上服务整体core掉(考虑到请求的间隔,为了应 ...
- android学习-Eclipse中修改Android项目图标
参考原文:http://blog.csdn.net/wpwbb510582246/article/details/52556753 方法一:替换res文件夹下的ic_launcher-web.png图 ...
- linux命令详解2-文件管理,查看文件命令
1. cat命令(tac) ----连接文件,并打印出来(顺序打印)与tac命令类似只不过,tac命令是逆序打印 [语法] cat [OPTION]... [FILE]... [选项] -A:显示所有 ...
- SPI protocol驱动编写实例
内核版本:3.9.5 Linux中SPI驱动有俩个部分组成:controller驱动,直接和底层硬件打交道,protocol驱动,针对特定的设备,也是我们要做的. 这里只考虑SPI protocol驱 ...
- minio test
docker pull minio/minio docker run --name=minio -d -p 9001:9000 minio/minio server /data https://do ...
- 新手C#ListView使用记录2018.08.03
在使用C#的ListView时,感觉有一些部分需要自己注意. ListView1.Clear()这条指令在使用时,用于Click后在ListView中显示数据,应该放在输入数据的前面. 在ListVi ...
- 3D数学基础 KeyNote 1
[计算几何复习要点] 1.向量加法的几何含意: a+b的释意为:a的尾连上b的头,新建一条从a的尾指向b的头的向量. 2.向量减法的几何含意: a-b的释意为:尾部相连,新建一个从b的头指向a的头的向 ...
- openLDAP 2
一.安装OPENLDAP 二.打开安装目录中的文件 slapd.conf 三.安装完成后退出 编辑文本,输入以下内容,并命名为test.ldif dn: dc=company objectClass: ...