jquery 跑马灯

jQuery 跑马灯实现方法

水平跑马灯效果

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

$(document).ready(function(){
    function scrollText(){
        $('.marquee').animate({left: '-=1px'}, 10, 'linear', function(){
            if(parseInt($(this).css('left')) <= -$(this).width()){
                $(this).css('left', $(this).parent().width());
            }
            scrollText();
        });
    }
    $('.marquee').css('left', $('.marquee-container').width());
    scrollText();
});

HTML结构：

<div class="marquee-container" style="width: 300px; overflow: hidden;">
    <div class="marquee" style="position: relative; white-space: nowrap;">
        这里是跑马灯文字内容，可以很长很长很长...
    </div>
</div>

垂直跑马灯效果

实现垂直方向滚动的跑马灯：

$(function(){
    var scrollHeight = $('.vertical-marquee').height();
    $('.vertical-marquee-container').height(scrollHeight/2);

    function scrollVertical(){
        $('.vertical-marquee').animate({top: '-=1px'}, 50, 'linear', function(){
            if(parseInt($(this).css('top')) <= -$(this).height()/2){
                $(this).css('top', 0);
            }
            scrollVertical();
        });
    }
    scrollVertical();
});

HTML结构：

<div class="vertical-marquee-container" style="overflow: hidden; position: relative;">
    <div class="vertical-marquee" style="position: relative;">
        <div>第一条消息</div>
        <div>第二条消息</div>
        <div>第三条消息</div>
    </div>
</div>

使用jQuery插件实现

推荐使用成熟的jQuery跑马灯插件如jQuery.marquee：

1. 引入插件文件：

   <script src="jquery.marquee.min.js"></script>

2. 初始化插件：

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

3. HTML结构：

   <div class="marquee">这里是跑马灯内容</div>

性能优化建议

• 使用CSS3硬件加速提升动画性能

  .marquee {
    will-change: transform;
    transform: translateZ(0);
  }

• 对于大量内容的跑马灯，考虑使用requestAnimationFrame替代animate

• 避免在滚动过程中频繁操作DOM

响应式设计考虑

添加窗口大小变化的处理：

$(window).resize(function(){
    $('.marquee').css('left', $('.marquee-container').width());
});

以上方法提供了从基础实现到插件使用的多种jQuery跑马灯解决方案，可根据项目需求选择合适的方式。