table內(nèi)容循環(huán)滾動

  • 第一種方法
<div class="frame-left-1">
        <style>
            .tablebox {
                height: calc(45vh - 123px);
                overflow: hidden;
                position: relative;
                width: 100%;
            }
            .table-header table {
                width: 100%;
            }
            .table-header table tr th {
                color: #fff;
            }
            .tbl-body {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            .tablebox table {
                width: 100%;
            }
            .tablebox table th {
                color: #fff;
                font-size: 15px;
                padding: 2px;
            }
            .tablebox table td {
                color: #73AAE5;
                padding: 5px;
                font-size: 15px;
                text-align: center;
            }
            .tablebox table tr th {
                background-color: #24CBFF;
                cursor: pointer;
            }
            .tbl-body tr:nth-child(even) td {
                background-color: #2B2753;
            }
            .tablebox table tr td span,
            .tablebox table tr td span {
                font-size: 24px;
            }
            .tablebox table tr {
                cursor: pointer;
            }
            .tbl-body table tbody tr:hover>td {
                background-color: #2379B2 !important;
                color: #fff;
            }
        </style>
        <div style="padding: 0px 10px;">
            <div class="inTitle" style="text-align: left;">違規(guī)車輛信息</div>
            <div class="table-header">
                <table cellspacing="0" cellpadding="0">
                    <thead>
                        <tr style="background:#24CBFF;height: 30px;">
                            <th style="width:10%;">序號</th>
                            <th style="width:30%;">車牌號</th>
                            <th style="width:20%;">顏色</th>
                            <th style="width:40%;">報(bào)警類型</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="tablebox">
                <div class="tbl-body">
                    <table cellspacing="0" cellpadding="0">
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
        <script>
            var MyMarhq = '';
            clearInterval(MyMarhq);
            $('.tbl-body tbody').empty();
            $('.tbl-header tbody').empty();
            var str = '';
            var Items = [{
                "index": 1,
                "Ranking": "桂FC8980",
                "City": "紅色555",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 2,
                "Ranking": "桂FC8980",
                "City": "白色",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 3,
                "Ranking": "桂FC8980",
                "City": "紅色",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 4,
                "Ranking": "桂FC8980",
                "City": "白色",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 5,
                "Ranking": "桂FC8980",
                "City": "紅色",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 6,
                "Ranking": "桂FC8980",
                "City": "白色",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 7,
                "Ranking": "桂FC8980",
                "City": "紅色",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 8,
                "Ranking": "桂FC8980",
                "City": "白色",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 9,
                "Ranking": "桂FC8980",
                "City": "紅色",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 10,
                "Ranking": "桂FC8980",
                "City": "白色",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 11,
                "Ranking": "桂FC8980",
                "City": "紅色",
                "SaleIncome": "車輛非法位移",
            }, {
                "index": 12,
                "Ranking": "桂FC8980",
                "City": "白色5555",
                "SaleIncome": "車輛非法位移",
            }]

            $.each(Items, function(i, item) {
                var newStr = '';
                var firstTd = '';
                if (item.index <= 5) {
                    firstTd = '<div class="newClass" style="display: inline-block;">' + item.index + '</div>'
                } else {
                    firstTd = '<div class="newClass2" style="display: inline-block;">' + item.index + '</div>'
                }
                str = '<tr class="tbodyTr_' + item.index + '" onclick="clickTr()">' +
                    '<td style="width:10%;">' + firstTd + '</td>' +
                    '<td style="width:30%;">' + item.Ranking + '</td>' +
                    '<td style="width:20%;">' + item.City + '</td>' +
                    '<td style="width:40%;">' + item.SaleIncome + '</td>' +
                    '</tr>'
                $('.tbl-body tbody').append(str);
                $('.tbl-header tbody').append(str);
                $(".newClass").css({
                    'font-size': '10px',
                    'text-align': 'center',
                    'width': '20px',
                    'height': '20px',
                    'line-height': '20px',
                    'border-radius': '50%',
                    'color': 'rgb(255, 255, 255)',
                    'background-color': 'rgb(241, 70, 70)',
                })
                $(".newClass2").css({
                    'font-size': '10px',
                    'text-align': 'center',
                    'width': '20px',
                    'height': '20px',
                    'line-height': '20px',
                    'border-radius': '50%',
                    'color': 'rgb(255, 255, 255)',
                    'background-color': 'rgb(72, 76, 220)',
                })
            });

            if (Items.length > 10) {
                $('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html()); //無縫滾動
                $('.tbl-body').css('top', '0');
                var tblTop = 0;
                var speedhq = 50;
                var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
                function Marqueehq() {
                    if (tblTop <= -outerHeight * Items.length) {
                        tblTop = 0;
                    } else {
                        tblTop -= 1;
                    }
                    $('.tbl-body').css('top', tblTop + 'px');
                }
                MyMarhq = setInterval(Marqueehq, speedhq);

                // 鼠標(biāo)移上去取消事件
                $(".tbl-body tbody").hover(function() {
                   clearInterval(MyMarhq);
                }, function() {
                    clearInterval(MyMarhq);
                    MyMarhq = setInterval(Marqueehq, speedhq);
                })
            }

            function clickTr(item) {
                clearInterval(MyMarhq);
                var winInfo = "toolbar=no,menubar=no,status=yes,scrollbars=no,resizable=no,titlebar=no,location=no,width=" + (window.screen.availWidth * 0.6) + ",height=" + (window.screen.availHeight * 0.8) + ",top=100%,left=350%,fullscreen=no";
                window.open('http://baidu.com', '', winInfo);
            }
        </script>
    </div>
  • 第二種方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.1.min.js"></script>
<style>
table,tbody,tfoot,thead,tr,th,td {
    margin:0;
    padding:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    border-collapse:collapse;
    border-spacing:0;
    border:0px;
}
.tablebox {
    width:300px;
    height:400px;
    overflow:hidden;
    margin:50px auto;
}
.tablebox table {
    width:100%;
}
.tablebox table th {
    color:#2584e3;
    background-color:#f6f6f6;
}
</style>
</head>
<body>
<div class="tablebox" style="border: 1px solid #000">
    <table id="tableId" border="0" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>車牌號</th>
                <th>顏色</th>
                <th>報(bào)警類型</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>桂FC8980</td>
                <td>紅色</td>
                <td>車輛非法位移</td>
            </tr>
             <tr>
                <td>桂FC8944</td>
                <td>白色</td>
                <td>車輛非法位移</td>
            </tr>
             <tr>
                <td>桂FC8980</td>
                <td>藍(lán)色</td>
                <td>車輛非法位移</td>
            </tr>
            <tr>
                <td>桂FC8980</td>
                <td>綠色</td>
                <td>車輛非法位移</td>
            </tr>
             <tr>
                <td>桂FC8944</td>
                <td>灰色</td>
                <td>車輛非法位移</td>
            </tr>
             <tr>
                <td>桂FC8980</td>
                <td>橘色</td>
                <td>車輛非法位移</td>
            </tr>
           <tr>
                <th>車牌號</th>
                <th>顏色</th>
                <th>報(bào)警類型</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>桂FC8980</td>
                <td>紅色</td>
                <td>車輛非法位移</td>
            </tr>
             <tr>
                <td>桂FC8944</td>
                <td>白色</td>
                <td>車輛非法位移</td>
            </tr>
             <tr>
                <td>桂FC8980</td>
                <td>藍(lán)色</td>
                <td>車輛非法位移</td>
            </tr>
            <tr>
                <td>桂FC8980</td>
                <td>綠色</td>
                <td>車輛非法位移</td>
            </tr>
             <tr>
                <td>桂FC8944</td>
                <td>灰色</td>
                <td>車輛非法位移</td>
            </tr>
             <tr>
                <td>桂FC8980</td>
                <td>橘色</td>
                <td>車輛非法位移</td>
            </tr>
      </tbody>
    </table>
</div>
<script>
tableScroll('tableId', 400, 30, 10)
var MyMarhq;
function tableScroll(tableid, hei, speed, len) {
    clearTimeout(MyMarhq);
    $('#' + tableid).parent().find('.tableid_').remove()
    $('#' + tableid).parent().prepend(
        '<table class="tableid_"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
      //或者
      //'<div style="height: 30px;overflow: hidden;position: relative;"><table><thead>' + $('#' + tableid ).html() + '</thead></table><div>'
    ).css({
        'position': 'relative',
        'overflow': 'hidden',
        'height': hei + 'px'
    })
    $(".tableid_").find('th').each(function(i) {
        $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
    });
    $(".tableid_").css({
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'z-index': 9
    })
    $('#' + tableid).css({
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'z-index': 1
    })
    if ($('#' + tableid).find('tbody tr').length > len) {
        $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
        $(".tableid_").css('top', 0);
        $('#' + tableid).css('top', 0);
        var tblTop = 0;
        var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
        function Marqueehq() {
            if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
                tblTop = 0;
            } else {
                tblTop -= 1;
            }
            $('#' + tableid).css('margin-top', tblTop + 'px');
            clearTimeout(MyMarhq);
            MyMarhq = setTimeout(function() {
                Marqueehq()
            }, speed);
        }
        MyMarhq = setTimeout(Marqueehq, speed);
        $('#' + tableid).find('tbody').hover(function() {
            clearTimeout(MyMarhq);
        }, function() {
            clearTimeout(MyMarhq);
            if ($('#' + tableid).find('tbody tr').length > len) {
                MyMarhq = setTimeout(Marqueehq, speed);
            }
        })
    }
}
</script>

</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末垦藏，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子擎鸠，更是在濱河造成了極大的恐慌憋他，老刑警劉巖懒豹，帶你破解...
    沈念sama閱讀 210,978評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件侦副，死亡現(xiàn)場離奇詭異，居然都是意外死亡剖踊，警方通過查閱死者的電腦和手機(jī)庶弃，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2贊 384
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來德澈，“玉大人歇攻，你說我怎么就攤上這事“鹪欤” “怎么了缴守？”我有些...
    開封第一講書人閱讀 156,623評論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長镇辉。 經(jīng)常有香客問我屡穗，道長，這世上最難降的妖魔是什么忽肛？ 我笑而不...
    開封第一講書人閱讀 56,324評論 1贊 282
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任村砂，我火速辦了婚禮，結(jié)果婚禮上屹逛，老公的妹妹穿的比我還像新娘础废。我一直安慰自己汛骂，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布评腺。 她就那樣靜靜地躺著帘瞭，像睡著了一般。 火紅的嫁衣襯著肌膚如雪蒿讥。 梳的紋絲不亂的頭發(fā)上图张，一...
    開封第一講書人閱讀 49,741評論 1贊 289
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音诈悍，去河邊找鬼祸轮。 笑死，一個胖子當(dāng)著我的面吹牛侥钳，可吹牛的內(nèi)容都是我干的适袜。 我是一名探鬼主播，決...
    沈念sama閱讀 38,892評論 3贊 405
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼舷夺，長吁一口氣：“原來是場噩夢啊……” “哼苦酱！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起给猾，我...
    開封第一講書人閱讀 37,655評論 0贊 266
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤疫萤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后敢伸，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扯饶，經(jīng)...
    沈念sama閱讀 44,104評論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年池颈，在試婚紗的時候發(fā)現(xiàn)自己被綠了尾序。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,569評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡躯砰，死狀恐怖每币，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情琢歇，我是刑警寧澤兰怠，帶...
    沈念sama閱讀 34,254評論 4贊 328
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站李茫，受9級特大地震影響揭保，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜涌矢，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一掖举、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧娜庇，春花似錦塔次、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0贊 21
  • 一樁弒父案励负，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至匕得，卻和暖如春继榆，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背汁掠。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來泰國打工略吨， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人考阱。 一個月前我還...
    沈念sama閱讀 46,260評論 2贊 360
  • 代替公主和親
    正文 我出身青樓翠忠，卻偏偏與公主長得像，于是被迫代替她去往敵國和親乞榨。 傳聞我的和親對象是個殘疾皇子秽之，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評論 2贊 348