js 无缝循环滚动 jq特效

基础概念

JavaScript 无缝循环滚动是一种常见的网页特效，它可以让页面上的元素（如文字、图片等）在用户不察觉的情况下持续滚动，从而提供流畅的用户体验。jQuery 是一个流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

类型

水平滚动：元素在水平方向上移动。
垂直滚动：元素在垂直方向上移动。
多列滚动：多个元素列交替滚动。

应用场景

新闻滚动条：实时更新的新闻标题或摘要。
广告横幅：循环展示多个广告图片。
社交媒体动态：显示最新的社交媒体帖子或消息。

示例代码

以下是一个简单的 jQuery 无缝循环滚动特效示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seamless Scrolling</title>
    <style>
        #scrollingDiv {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
        }
        #scrollingContent {
            display: inline-block;
            animation: scroll 10s linear infinite;
        }
        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div id="scrollingDiv">
        <div id="scrollingContent">
            <span>Content 1</span>
            <span>Content 2</span>
            <span>Content 3</span>
            <span>Content 4</span>
            <span>Content 5</span>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var $scrollingContent = $('#scrollingContent');
            var contentWidth = $scrollingContent.width();
            var clone = $scrollingContent.clone().appendTo('#scrollingDiv');

            function startScrolling() {
                $scrollingContent.animate({
                    marginLeft: -contentWidth
                }, 10000, 'linear', function() {
                    $(this).css('marginLeft', contentWidth);
                    startScrolling();
                });
            }

            startScrolling();
        });
    </script>
</body>
</html>