jquery 文字滚动

jQuery 文字滚动实现方法

使用 jQuery 可以实现多种文字滚动效果，例如横向滚动、纵向滚动或跑马灯效果。以下是几种常见的实现方式：

横向文字滚动

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

CSS 部分：

.scrolling-container {
    position: relative;
    width: 100%;
    height: 30px;
    overflow: hidden;
}
.scrolling-text {
    position: absolute;
    white-space: nowrap;
}

纵向文字滚动

$(document).ready(function() {
    function scrollVertical() {
        $('.scrolling-container').animate({scrollTop: $('.scrolling-text').height()}, 5000, 'linear', function() {
            $(this).scrollTop(0);
            scrollVertical();
        });
    }
    scrollVertical();
});

CSS 部分：

.scrolling-container {
    height: 100px;
    overflow: hidden;
}

跑马灯效果

$(document).ready(function() {
    var container = $('.marquee');
    var content = container.html();
    container.html(content + content);

    function marquee() {
        var firstItem = container.find('span:first');
        var width = firstItem.width();

        container.animate({scrollLeft: width}, 5000, 'linear', function() {
            container.scrollLeft(0);
            marquee();
        });
    }
    marquee();
});

CSS 部分：

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
.marquee span {
    display: inline-block;
    padding-left: 100%;
}

使用 jQuery 插件实现

对于更复杂的需求，可以使用专门的 jQuery 插件：

1. jQuery Marquee 插件

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

2. jQuery News Ticker 插件

   

   $('.ticker').newsTicker({
    row_height: 48,
    max_rows: 3,
    speed: 600,
    direction: 'up',
    duration: 4000,
    autostart: 1,
    pauseOnHover: 1
   });

注意事项

• 确保在调用 jQuery 代码前已加载 jQuery 库
• 考虑性能优化，避免在移动设备上使用过于复杂的动画
• 对于大量文本内容，建议使用 CSS3 动画替代 jQuery 动画以获得更好的性能
• 添加适当的容器样式以防止布局跳动

这些方法可以根据具体需求进行调整，通过修改动画参数、方向或添加回调函数来实现不同的滚动效果。