美文网首页
table内容循环滚动

table内容循环滚动

作者: 懵懵圈 | 来源:发表于2019-03-05 10:54 被阅读0次
    • 第一种方法
    <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>

    相关文章

      网友评论

          本文标题：table内容循环滚动

          本文链接：https://www.haomeiwen.com/subject/yaknuqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|table内容循环滚动|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！