在＜td＞标签中实现动态字幕横向滚动

1、首先看下效果

2、主要是在表格第二列【important】以及【2019-2-21】上加了长度判断。如果长度超过限制范围，就执行横向滚动

3、代码如下：

css:

<style>
        .up {
            color: black;
            display: block;
            width: 96%;
            height: 20px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .down {
            color: gray;
            display: block;
            width: 96%;
            height: 20px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .up_text {
            position: absolute;
            top: 0;
            left: 100%;
            line-height: 20px;
            display: block;
            word-break: keep-all;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .down_text {
            position: absolute;
            top: 0;
            left: 100%;
            line-height: 20px;
            display: block;
            word-break: keep-all;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    </style>

js[注：页面中如果没有引用jquery.js就单独再引用下]：

<script type="text/javascript">
    (function(){var timer = setTimeout(this.upCycle, 1000);}());
    function upCycle() {
        var upScrollWidth = $('.up').width();
        var upTextWidth = $('.up_text').width();
        var i = upScrollWidth;
        setInterval(function() {
            i--;
            if(i < -upTextWidth ) {
                i = upScrollWidth;
            }
            $('.up_text').animate({'left': i+'px'}, 20);
        }, 20);

        var downScrollWidth = $('.down').width();
        var downTextWidth = $('.down_text').width();
        var j = downScrollWidth;
        setInterval(function() {
            j--;
            if(j < -downTextWidth ) {
                j = downScrollWidth;
            }
            $('.down_text').animate({'left': i+'px'}, 20);
        }, 20);
    }
</script>

逻辑：

if(record.position.length > 7){
                            content += "<td class='text-center'>" + " <span class='up'>" + " <span class='up_text'>" + record.object + "</span></span>"  + " <span class='down'>" + " <span class='down_text'>" + record.position + "</span></span>" + "</td>";
                        }else{
                            content += "<td class='text-center'>" + " <span class='up'>" + " <span class='up_text'>" + record.object + "</span></span>"  + " <span class='color-gray'>" + record.position + "</span>" + "</td>";
                        }

觉得辛苦就扫一扫：