table数据跑马灯效果
生活随笔
收集整理的這篇文章主要介紹了
table数据跑马灯效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、使用marquee標簽實現普通文本字符串跑馬燈效果。
<marquee behavior="scroll" scrollamount="3">我左右滾動</marquee> <marquee behavior="scroll" scrollamount="2" direction="up">我上下滾動</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">我左右滾動</marquee>
<marquee behavior="scroll" scrollamount="2" direction="up">我上下滾動</marquee>
<table width="256">
<thead>
<tr>
<th width="80%">詳情</th>
<th>編號</th>
</tr>
</thead>
</table>
<table>
<tr>
<td align="center">
<div id=rolllinkk>
<div id=rolllinkk1>
<!-- 下面是你要顯示的內容 -->
<table width="100%" cellpadding="2">
<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数据跑马灯效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： matlab广泛用于什么,目前，Matl
- 下一篇： Android让屏幕保持常亮,不熄屏的三