jquery/css:使div内的文本水平滚动,就像新闻自动收报机没有插件一样

Question

任何人都有一些提示,如何在"新闻自动收报机"的方式从右到左水平地在div内滚动文本而不必使用插件.以下是我正在尝试完成的示例(这是一个插件解决方案:http://www.maaki.com/scrollingText.html).

Answer 1

这是一个快速的解决方案:http: //jsfiddle.net/4mTMw/8/

var marquee = $('div.marquee');
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});?

使用text-indentcss属性,您可以相当简单地执行此操作.

Answer 2

我最近用CSS关键帧动画解决了这个问题.

基本上你的股票代码需要一个包含div的包装div.包含的代码应该显示内联块,以便它们排成一行:

<div class="ticker-wrap">
    <div class="ticker">
        <div class="ticker__item">Letterpress chambray brunch.</div>
        <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
        <div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
    </div>
</div>

CSS示例:

.ticker-wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    height: 4rem;
    background-color: rgba(51, 51, 51, 0.5);
    padding-left: 100%; // offsets items to begin
}

.ticker {
    display: inline-block;
    height: 4rem;
    line-height: 4rem;
    white-space: nowrap;
    padding-right: 100%; // taken from container as display inline-block
}

.ticker__item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 2rem;
    color: white;
}

我有一个使用css关键帧动画的演示,然后无限地将内容从一侧转换到另一侧.nb供应商前缀版本未显示.

@keyframes ticker {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);

    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
    }
}

您需要的唯一调整是设置动画持续时间并将其应用于.ticker.

.ticker {
    animation-name: ticker;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 25s; // tweak based on number of items/desired speed
}

你可以看到完整的演示