正文

掌握jQuery滚动效果，轻松实现炫酷跑马灯Demo

/0 浏览量
0313

跑马灯效果是一种常见的网页动态展示技术，常用于新闻标题滚动、广告轮播等场景，能有效利用有限的空间展示更多的信息。本文将详细介绍如何使用jQuery库来创建一个简单的跑马灯效果，并逐步实现一个炫酷的跑马灯Demo。

准备工作

在开始之前，请确保您的开发环境中已经安装了jQuery库。您可以从jQuery的官方网站下载最新版本的jQuery库，并将其包含到您的HTML页面中。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

HTML结构

首先，我们需要创建一个HTML结构来承载跑马灯内容。以下是一个简单的HTML结构示例：

<div id="marquee-container" class="marquee-container">
    <div class="marquee-text">
        <p>这里是跑马灯内容1</p>
        <p>这里是跑马灯内容2</p>
        <p>这里是跑马灯内容3</p>
        <!-- 更多内容 -->
    </div>
</div>

CSS样式

接下来，我们需要为跑马灯添加一些基本的CSS样式。以下是跑马灯容器的CSS样式：

.marquee-container {
    width: 300px; /* 容器宽度，根据实际需求调整 */
    overflow: hidden; /* 隐藏超出部分的内容 */
    white-space: nowrap; /* 防止文本换行 */
}

.marquee-text {
    padding-right: 100%; /* 文本元素的总宽度比容器大，形成循环滚动的基础 */
    animation: marquee 10s linear infinite; /* 动画名称、持续时间、运动曲线、播放次数 */
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

JavaScript动画

最后，我们需要使用JavaScript来控制跑马灯的动画效果。以下是使用jQuery实现跑马灯动画的JavaScript代码：

$(document).ready(function() {
    var $marqueeText = $('.marquee-text');
    var marqueeWidth = $marqueeText.outerWidth();

    function moveMarquee() {
        $marqueeText.animate({
            'left': -marqueeWidth
        }, 10000, 'linear', function() {
            $marqueeText.css('left', 0);
        });
    }

    moveMarquee();
    setInterval(moveMarquee, 10000); // 每10秒刷新一次动画
});

完整示例

以下是完整的跑马灯Demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .marquee-container {
            width: 300px;
            overflow: hidden;
            white-space: nowrap;
        }

        .marquee-text {
            padding-right: 100%;
            animation: marquee 10s linear infinite;
        }

        @keyframes marquee {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div id="marquee-container" class="marquee-container">
        <div class="marquee-text">
            <p>这里是跑马灯内容1</p>
            <p>这里是跑马灯内容2</p>
            <p>这里是跑马灯内容3</p>
            <!-- 更多内容 -->
        </div>
    </div>

    <script>
        $(document).ready(function() {
            var $marqueeText = $('.marquee-text');
            var marqueeWidth = $marqueeText.outerWidth();

            function moveMarquee() {
                $marqueeText.animate({
                    'left': -marqueeWidth
                }, 10000, 'linear', function() {
                    $marqueeText.css('left', 0);
                });
            }

            moveMarquee();
            setInterval(moveMarquee, 10000);
        });
    </script>
</body>
</html>

通过以上步骤，您已经成功创建了一个简单的跑马灯效果。您可以根据实际需求调整样式和动画参数，以实现更加炫酷的跑马灯效果。

-- 展开阅读全文 --