jquery文字滚动

jQuery 文字滚动实现方法

使用 jQuery 实现文字滚动效果可以通过多种方式完成，以下是几种常见的实现方法：

水平滚动效果

通过修改元素的 left 或 margin-left 属性实现水平滚动：

$(function() {
  var $element = $('.scroll-text');
  var textWidth = $element.width();
  var containerWidth = $element.parent().width();

  function scrollHorizontal() {
    $element.animate({marginLeft: -textWidth}, 15000, 'linear', function() {
      $element.css('marginLeft', containerWidth);
      scrollHorizontal();
    });
  }

  scrollHorizontal();
});

垂直滚动效果（跑马灯）

适用于垂直方向的多行文本滚动：

$(document).ready(function(){
  var scrollSpeed = 50;
  var $scrollContainer = $('.scroll-container');
  var $scrollContent = $scrollContainer.html();

  $scrollContainer.html('<div class="scroll-content">'+$scrollContent+'</div>');

  function scrollVertical(){
    var $content = $('.scroll-content');
    $content.animate({top: -$content.height()}, scrollSpeed * $content.height(), 'linear', function(){
      $content.css('top', $scrollContainer.height());
      scrollVertical();
    });
  }

  scrollVertical();
});

使用 marquee 插件简化实现

jQuery Marquee 插件提供了更简单的实现方式：

$('.scroll-text').marquee({
  duration: 15000,
  gap: 50,
  delayBeforeStart: 0,
  direction: 'left',
  duplicated: true
});

无限循环滚动技巧

克隆内容实现无缝滚动：

$('.scroller').each(function(){
  var $this = $(this);
  $this.append($this.html());
}).css({
  'white-space': 'nowrap',
  'overflow': 'hidden'
}).animate(
  {textIndent: -$(this).width()}, 
  {duration: 10000, easing: 'linear', complete: function(){
    $(this).css('textIndent', 0);
    $(this).trigger('scroll');
  }}
);

CSS 配合实现

添加基础样式确保滚动效果正常：

.scroll-container {
  position: relative;
  height: 100px;
  overflow: hidden;
}
.scroll-content {
  position: absolute;
  width: 100%;
}

性能优化建议

• 使用 CSS transform 代替 top/left 动画
• 合理设置动画持续时间避免卡顿
• 移动端考虑使用 requestAnimationFrame
• 页面不可见时暂停动画

以上方法可根据具体需求选择使用，插件方式实现最为简便，原生实现则更灵活可控。