当前位置：首页 > jquery

jquery 文字滚动

2026-04-08 17:16:20jquery

jQuery 文字滚动实现方法

水平滚动效果

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

$('.scroll-text').animate({ 
  'margin-left': '-=50px' 
}, 1000, 'linear', function() {
  $(this).css('margin-left', '100%');
  $(this).animate({ 'margin-left': '-=50px' }, 1000);
});

垂直滚动效果

使用scrollTop属性实现垂直方向滚动：

let scrollHeight = $('.scroll-container')[0].scrollHeight;
$('.scroll-container').animate({
  scrollTop: scrollHeight
}, 2000).animate({
  scrollTop: 0
}, 2000);

无限循环滚动

克隆内容实现无缝循环：

$('.marquee').each(function() {
  let marq = $(this);
  marq.append(marq.find('span').clone());
  marq.css('width', marq.find('span').width() * 2);

  function scroll() {
    marq.animate({scrollLeft: marq.find('span').width()}, 10000, 'linear', function() {
      marq.scrollLeft(0);
      scroll();
    });
  }
  scroll();
});

暂停/继续控制

添加事件控制滚动状态：

let marquee = $('.marquee');
let isPaused = false;

marquee.hover(
  function() { 
    marquee.stop(); 
    isPaused = true; 
  },
  function() { 
    if(isPaused) {
      startScroll(); 
      isPaused = false;
    }
  }
);

function startScroll() {
  marquee.animate(
    { scrollLeft: marquee[0].scrollWidth },
    { duration: 15000, easing: 'linear', complete: function() {
      marquee.scrollLeft(0);
      startScroll();
    }}
  );
}

响应式处理

根据窗口大小调整滚动速度：

$(window).resize(function() {
  let speed = $(window).width() > 768 ? 10000 : 5000;
  $('.marquee').stop().animate({scrollLeft: '+=100'}, speed, 'linear');
});

注意事项

jquery 文字滚动