jquery移动端获奖滚动

最近我正在开发一个移动端的网站，为了增加用户体验，我想加入一个获奖滚动的功能。经过调研，我决定使用jQuery来实现。

首先，我下载了最新版的jQuery并将其引入到我的代码中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

接着，我开始编写获奖数据的HTML代码：

<div id="award-scroll">
  <ul>
    <li>2019年度最佳公司</li>
    <li>2018年度创新奖</li>
    <li>2017年度杰出贡献奖</li>
  </ul>
</div>

注意，这里的id为"award-scroll"的div是外层容器，我们后面会用到它。

接着，我编写jQuery代码：

<script>
  $(function() {
    var $scroll = $('#award-scroll ul');
    var $lis = $scroll.find('li');
    var loop = setInterval(function() {
      $scroll.animate({
        'margin-top': -$lis.height() + 'px'
      },500,function() {
        $scroll.find('li:first').appendTo($scroll);
        $scroll.css('margin-top',0);
      });
    },2000);
  });
</script>

这段代码中，我首先找到了获奖数据的ul标签，并将每一个li标签存储在变量$lis中。接着使用setInterval()函数来循环滚动。在循环中，我使用animate()函数来执行滚动动画。当滚动到最后一个li标签时，我将它放置到ul的最前面，并将margin-top置为0，实现循环滚动效果。

最后，我刷新页面，看到了完美的获奖滚动效果。jQuery的便捷性和动画效果的流畅性，让我对移动端网站的开发更加充满信心。