下面是一个基于 jQuery 实现的简单跑马灯效果示例：

<div class="marquee-container">
  <div class="marquee-text">这是一段跑马灯文本，可以循环滚动显示。</div>
</div>

CSS 代码：

.marquee-container {
  overflow: hidden;
  width: 300px;
}

.marquee-text {
  white-space: nowrap;
  display: inline-block;
  padding-right: 100%;
  animation: marquee 10s linear infinite;
}

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

JavaScript 代码：

$(function() {
  // 获取跑马灯文本容器和文本元素
  const $container = $('.marquee-container');
  const $text = $('.marquee-text');

  // 获取文本元素的宽度
  const textWidth = $text.outerWidth();

  // 设置文本容器的宽度为文本元素的宽度
  $container.css('width', textWidth);

  // 在文本元素后面添加一个副本
  $text.clone().appendTo($container);

  // 动态调整文本元素的宽度
  $(window).on('resize', function() {
    const containerWidth = $container.width();
    $text.css('width', containerWidth);
  }).trigger('resize');
});

该示例的实现方法是通过将文本元素的宽度设置为父容器宽度的100%，然后使用 CSS 动画实现文本元素的循环滚动。其中，`animation` 属性用于指定动画名称、持续时间、时间函数和动画播放次数等。通过设置 `transform: translateX(-100%)`，使文本元素向左平移，实现滚动效果。

另外，为了使跑马灯能够无限循环滚动，我们在文本元素的末尾添加了一个副本，并且在窗口大小变化时动态调整文本元素的宽度，以保证文本元素的内容始终可以完整地展示。