无缝滚动文本

Question

我正在尝试实现类似于新闻报价器的东西，除了我不知道正在滚动的文本的大小。文本的结尾必须紧跟文本的开头(换行)。我目前的解决方案包括复制文本，使其看起来无限，但我在使其看起来无缝方面存在问题。

目前我有这个：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();

你会注意到文本会换行，但是有一个断点，在那里我重置了左边距，并导致了一个“跳转”。有没有办法让这一切变得无缝呢？我不希望必须一直将字符串附加到它自身，并允许它永远向左滚动。

Answer 1

在tick函数中，不要将left设置为0，只注释该行。

​

    $.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>

​

Answer 2

尝试在tick函数中使用.animate()

function tick() {
    return $tickerText.css("marginLeft", left * 2)
        .animate({
        marginLeft: "-" + (left * 2) + "px"
    }, 3000, "linear", tick)
}

​

$.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() {
        return $tickerText.css("marginLeft", left * 2)
          .animate({
            marginLeft: "-" + (left * 2) + "px"
          }, settings.duration, "linear", tick)
      }
      tick();
      return this;
    }

    $.fn.ticker.defaults = {
      speed: 1,
      duration: 5000
    };
    $('.ticker').ticker({duration:10000});

.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/1.11.1/jquery.min.js">
</script>
<div class="ticker"></div>

​

jsfiddle http://jsfiddle.net/3ez9e81o/2/