如何使用 jQuery 为小空间中的大文本实现文本轮播？

Question

我希望在 div 中以小宽度动态显示较长的文本。我在一些手机上看到过这种效果：

当显示文本的最后一部分时，旋转木马 改变方向并重新开始。

我找不到与此相关的任何插件或示例。

如何用jQuery实现它？

Answer 1

我不确定是否存在这样的库，但我刚刚根据您的问题仅使用 jQuery 创建了一个实现。

如果您对它的工作原理有任何疑问，请告诉我，希望对您有所帮助！

// adjust these:
var loopScrollSpeed = 5;    // adjust speed (lower = slower)
var loopPauseLength = 1000; // pause in miliseconds
var loopSelector = '.loop-text';

// create our function:
function loopText(el, widthDiff, starting) {
  el.animate({
    'left': starting ? -widthDiff : 0
  }, widthDiff * 100 / loopScrollSpeed, 'linear', function() {
    setTimeout(function() {
      loopText(el, widthDiff, !starting);
    }, loopPauseLength);
  });
}

// loop through all elements with our selector
$(loopSelector).each(function() {
  el = $(this).find('span');
  widthDiff = el.width() - $(this).width();
  if (widthDiff > 0) {
    loopText(el, widthDiff, true);
  }
});

.loop-text {
  /* adjust these: */
  border: 1px solid blue;
  width: 150px;

  /* leave these: */
  overflow: hidden;
  position: relative;
  text-align: center;
}

.loop-text span {
  white-space: nowrap;
  position: relative;
}

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

<div class="loop-text">
  <span>The Beatles &mdash; A Day in the Life</span>
</div>

<br>

<div class="loop-text">
  <span>Text fits - no scroll</span>
</div>

<br>

<div class="loop-text">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

如何使用 jQuery 为小空间中的大文本实现文本轮播？

How implement text-carousel for large text in small spaces with jQuery?

jquery

css

jquery-effects