jQuery实现公告文字左右滚动

可以使用jQuery和CSS来实现公告文字左右滚动。这里提供一个简单的示例代码：

HTML：

<div class="notice">
  <ul>
    <li>公告1</li>
    <li>公告2</li>
    <li>公告3</li>
    <li>公告4</li>
    <li>公告5</li>
  </ul>
</div>

CSS：

.notice {
  width: 200px;
  height: 20px;
  overflow: hidden;
}

.notice ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notice li {
  float: left;
  margin-right: 20px;
}

JavaScript：

$(function() {
  var noticeWidth = $(".notice").width();
  var ulWidth = 0;
  $(".notice li").each(function() {
    ulWidth += $(this).outerWidth();
  });
  $(".notice ul").width(ulWidth);
  
  function scrollNotice() {
    var scrollLeft = $(".notice ul").position().left - 1;
    if (scrollLeft < -ulWidth + noticeWidth) {
      scrollLeft += ulWidth;
    }
    $(".notice ul").css("left", scrollLeft);
    requestAnimationFrame(scrollNotice);
  }
  
  scrollNotice();
});

解释一下代码的实现过程：

- 首先设置公告容器 `.notice` 的宽度和高度，并设置 `overflow: hidden`，这样公告文字就不会超出容器范围而显示滚动条。
- 然后设置公告列表 `.notice ul` 的样式，将列表项的样式设置为 `float: left`，这样列表项就可以水平排列。
- 在 JavaScript 中，首先计算出公告列表的总宽度，然后将公告列表的宽度设置为总宽度。这样公告列表的宽度就可以自适应文字长度。
- 接着使用 `requestAnimationFrame` 方法循环执行 `scrollNotice` 函数，实现公告文字的左右滚动效果。在 `scrollNotice` 函数中，先获取公告列表的左侧位置，然后将其减去 1，实现向左滚动的效果。当公告列表左侧位置小于容器宽度减去列表总宽度时，将其重置为 0，实现循环滚动的效果。最后使用 `css` 方法将公告列表的左侧位置设置为滚动后的位置。