jquery 文字滚动

jQuery 文字滚动实现方法

水平滚动效果

使用animate方法实现水平滚动效果：

function scrollTextHorizontally() {
  $(".scroll-text").animate({left: '-=50px'}, 500, 'linear', function() {
    if(parseInt($(this).css("left")) < -$(this).width()) {
      $(this).css("left", $(this).parent().width() + "px");
    }
    scrollTextHorizontally();
  });
}

垂直滚动效果

实现类似新闻跑马灯的垂直滚动：

function scrollTextVertically() {
  $(".scroll-container").animate({scrollTop: $(".scroll-item:last").offset().top}, 2000, function() {
    $(".scroll-item:first").appendTo(".scroll-container");
    $(".scroll-container").scrollTop(0);
    setTimeout(scrollTextVertically, 1000);
  });
}

无限循环滚动

结合CSS实现平滑无限循环：

.scroll-wrapper {
  overflow: hidden;
  white-space: nowrap;
}
.scroll-content {
  display: inline-block;
}

$(".scroll-content").clone().appendTo(".scroll-wrapper");
$(".scroll-wrapper").animate({scrollLeft: $(".scroll-content").width()}, 10000, 'linear', function() {
  $(this).scrollLeft(0);
  animateScroll();
});

鼠标悬停控制

添加交互控制功能：

$(".scroll-area").hover(
  function() {
    $(this).stop(true);
  },
  function() {
    $(this).animate({scrollTop: $(this).prop("scrollHeight")}, 5000);
  }
);

响应式处理

适应不同屏幕尺寸：

$(window).resize(function() {
  $(".scroller").css("font-size", $(window).width()/30 + "px");
});

插件推荐

1. jQuery Marquee：轻量级文字滚动插件

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

2. Ticker.js：高性能滚动解决方案

   

   $('#news-ticker').ticker({
     titleText: '最新消息',
     controls: true
   });

这些方法可根据具体需求选择使用，注意调整动画时间和缓动函数以获得最佳视觉效果。