table内容循环滚动

  • 第一种方法
<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;">违规车辆信息</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%;">报警类型</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);

                // 鼠标移上去取消事件
                $(".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>报警类型</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>蓝色</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>报警类型</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>蓝色</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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,699评论 6赞 513
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,124评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 167,127评论 0赞 358
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,342评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,356评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,057评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,654评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,572评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,095评论 1赞 318
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,205评论 3赞 339
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,343评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 36,015评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,704评论 3赞 332
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,196评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,320评论 1赞 271
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,690评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,348评论 2赞 358