无缝滚动文本 [英] Seamless scrolling text

问题描述

我正在尝试实现类似于新闻自动收录器的功能，除了我不知道正在滚动的文本的大小。文本的结尾必须紧跟文本的开头（包装）。我目前的解决方案是让我复制文本以使其看起来无限，但我遇到问题让它看起来无缝。

I'm trying to implement something similar to a news ticker, except I don't know the size of the text that is being scrolled. The end of the text has to be followed immediately by the beginning of the text (wrapped). My current solution involves me duplicating the text to make it look infinite, but I'm having issues getting it to look seamless.

目前我有这个：
http://jsfiddle.net/theintellects/e7td1g0w/1/

有问题的代码：

    var containerwidth = $ticker.width();
    var left = containerwidth;
    var width = $tickerText.width();    
    function tick() {
        if (--left < -width) {
            left = 0;
        }
        $tickerText.css("margin-left", left + "px");
        setTimeout(tick, settings.speed);
    }
    tick();

您会注意到文本已经回绕但是有一个断点我重置了左边距，并导致跳跃。有没有办法使这个无缝？我不想继续将字符串附加到自身并允许它永远向左滚动。

You'll notice that the text wraps around but there is a breakpoint where I reset the left-margin, and causes a "jump". Is there any way to make this seamless? I'd prefer not to have to keep appending the string to itself and allow it to scroll forever to the left.

推荐答案

in你的tick函数不会设置为0而只是注释该行。

in your tick function do not set left with 0 just comment that line.

    $.fn.ticker = function (options) {
        'use strict';

        var settings = $.extend({}, $.fn.ticker.defaults, options);
        var $ticker = $(this);
        var tickerdata = {
            'content': 'I have some news for you, here is some breaking news that is looping around and around on and on and never seems to end. But what if it ends?'
        };

        var docfragment = document.createDocumentFragment();
        var $tickerText = $('<span/>', {
            class: 'ticker-text',
            html: tickerdata.content
        }).appendTo(docfragment);
        $ticker.append(docfragment);

        var containerwidth = $ticker.width();
        var left = containerwidth;
        var width = $tickerText.width();

        function tick() {
               if (--left< -width) {
                    left = containerwidth;//try setting it with container width
               }
            $tickerText.css("margin-left", left + "px");
            setTimeout(tick, settings.speed);
        }
        tick();
        return this;
    }

    $.fn.ticker.defaults = {
        speed: 11//change this for good visibility
    };
	$('.ticker').ticker();

.ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 100%;
    background-color: blue;
    color: yellow;
    display: inline-block;
}
.ticker .ticker-text {
    top: 0;
    height: 100%;
    padding: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticker"></div>

这篇关于无缝滚动文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！