HTML、CSS和JavaScript实现跑马灯效果代码示例

以下是一个基本的跑马灯代码示例，使用HTML、CSS和JavaScript实现跑马灯效果：

HTML：

<div class='marquee'>
  <ul>
    <li>这是跑马灯的第一行。</li>
    <li>这是跑马灯的第二行。</li>
    <li>这是跑马灯的第三行。</li>
  </ul>
</div>

CSS：

.marquee {
  overflow: hidden;
  position: relative;
}

.marquee ul {
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.marquee li {
  display: block;
  float: left;
  padding: 0 20px;
  font-size: 18px;
  line-height: 40px;
}

JavaScript：

function marquee() {
  $('.marquee ul').animate({
    left: '-=1'
  }, 0, function() {
    var $this = $(this);
    if ($this.children().length <= ($this.width() / $this.children().first().width())) {
      $this.append($this.children().clone());
    }
    if ($this.position().left <= -($this.children().first().width())) {
      $this.children().first().remove();
      $this.css('left', '0');
    }
  });
}

setInterval(marquee, 20);

这段代码使用jQuery库，通过将整个ul元素向左移动1像素，并在需要时循环滚动内容来实现跑马灯效果。当ul的位置到达一个li元素的宽度之外时，代码会删除第一个li元素并将ul的位置重置为0。代码还添加了一个setInterval函数，以每20毫秒调用marquee函数。