jquery 文字上下滚动效果

基础概念

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>jQuery 文字上下滚动效果</title>
    <style>
        #scroll-container {
            width: 300px;
            height: 100px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        #scroll-content {
            position: relative;
            height: 200px;
        }
        #scroll-content p {
            position: absolute;
            width: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-content">
            <p>这是第一条滚动信息。</p>
            <p>这是第二条滚动信息。</p>
            <p>这是第三条滚动信息。</p>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            function scrollText() {
                var $content = $('#scroll-content');
                var $first = $content.find('p:first');
                $first.animate({ top: '-100px' }, 500, function() {
                    $first.css('top', '100px').appendTo($content);
                });
            }

            setInterval(scrollText, 2000);
        });
    </script>
</body>
</html>