jquery多个p标签的一行文字走马灯

如果您希望多个p标签的文字在同一行内进行走马灯滚动，可以将它们放在一个容器内，然后对容器进行样式设置。以下是一个示例代码：

<div class="marquee">
    <p>这是第一个需要滚动的文字</p>
    <p>这是第二个需要滚动的文字</p>
</div>

.marquee {
    overflow: hidden;
    position: relative;
    white-space: nowrap;  /* 防止文字换行 */
}
.marquee p {
    display: inline-block;
    margin: 0;
    padding: 0 20px;  /* 调整文字之间的间距 */
    line-height: 50px;  /* 调整文字垂直居中 */
    animation: marquee 10s linear infinite;
}
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

这样，两个p标签内的文字就会在同一行内进行走马灯滚动。您可以根据需要调整文字之间的间距、滚动速度、动画方向等参数。

相关问题

jquery多个p标签的一行文字循环走马灯

如果您希望多个p标签的文字在同一行内进行循环走马灯滚动，可以使用jQuery的clone()方法来复制p标签，并将其添加到容器的末尾。以下是一个示例代码：

<div class="marquee">
    <p>这是第一个需要滚动的文字</p>
    <p>这是第二个需要滚动的文字</p>
</div>

.marquee {
    overflow: hidden;
    position: relative;
    white-space: nowrap;  /* 防止文字换行 */
}
.marquee p {
    display: inline-block;
    margin: 0;
    padding: 0 20px;  /* 调整文字之间的间距 */
    line-height: 50px;  /* 调整文字垂直居中 */
}

$(function() {
    var width = $('.marquee').width();
    var duration = width * 10;  // 计算动画持续时间
    $('.marquee p').clone().appendTo('.marquee');  // 复制p标签并添加到容器末尾
    $('.marquee').animate({ left: -width }, duration, 'linear', function() {
        $(this).css('left', 0);
        $('.marquee p:first').appendTo(this);  // 将第一个p标签移动到容器末尾
    });
});

这样，多个p标签内的文字就会在同一行内进行循环走马灯滚动。您可以根据需要调整文字之间的间距、滚动速度、动画方向等参数。