當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

table数据跑马灯效果

發布時間：2023/12/13 综合教程 26 生活家

生活随笔收集整理的這篇文章主要介紹了 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
下一篇： mysql数据库出现幻读,MySQL 幻