题目：
使用jQuery，实现如下图所示的文字滚动效果。

分析：

1.实现以此文字滚动动画：通过jQuery中的 animate() 方法，改变元素CSS的 top 属性，设置成负的列表项的行高，动画事件设置成1s。
2.一次动画结束后，列表的第一行元素将被覆盖，将它插入到列表到最后一行，同时设置 top 属性是0，恢复位置，准备下一次动画。使用 setInterval() 函数循环定时调用动画方法，实现列表循环滚动。

---

实现步骤：

01基础HTML结构如下：
jQuery实例之文字循环滚动效果
原创2021-11-29 19:30·开始study
题目：

使用jQuery，实现如下图所示的文字滚动效果。

jQuery实例之文字循环滚动效果
分析：

实现以此文字滚动动画：通过jQuery中的 animate() 方法，改变元素CSS的 top 属性，设置成负的列表项的行高，动画事件设置成1s。
一次动画结束后，列表的第一行元素将被覆盖，将它插入到列表到最后一行，同时设置 top 属性是0，恢复位置，准备下一次动画。
使用 setInterval() 函数循环定时调用动画方法，实现列表循环滚动。
实现步骤：

基础HTML结构如下：

<div id="app">
    <div id="title">天天动态</div>
  <ul id="ulist">
    <li>银行汇款账号变更</li>
      <li>卡莉芙面膜分享心得</li>
      <li>狂欢大放价2折起 满再减</li>
      <li>天天网荣膺消费者最喜爱的网站</li>
      <li>天天网防诈骗公告</li>
      <li>韩妆集结号 全网五折封顶</li>
  </ul>
</div>

同时，不要忘记在header中引入jQuery。

<script src="https://blog.fqidc.cn/jquery-3.4.1.min.js"></script>

---

02调整样式，最终代码如下：

<style>
        #app {
            width: 300px;
            border: 1px solid gray;
            position: relative;
            left: 40px;
            height: 100px;
            overflow: hidden;
        }
        #title {
            position: relative;
            background-color: lightgray;
            z-index: 10;
        }
        #ulist {
            display: block;
            position: relative;
            overflow: hidden;
            margin: 0px;
        }
        #ulist li {
            display: block;
        }
</style>

这步过后，效果如下图：

---

03编写JavaScript代码
定义一个函数scroll()，功能是实现一个列表项的滚动动画，然后，每间隔2s调用一次。代码如下：

 <script>
        // 向上滚动一次的函数
        function scroll() {
            // 获取一个列表项的高度
            var height = $("#ulist li").height();
            // 暂存ulist元素
            var ulist = $("#ulist");
            // 动态改变CSS中的top属性，动画时间是1s
            ulist.animate({ top: "-" + height }, 1000, function () {
                // 动画结束后，挪动列表第一项位置，将其放在最后一项后面
                ulist.find("li:last").after(ulist.find("li:first"));
                // 这时，原来的第二项就成了第一项，改动后位置不再需要向上移动，
                // 因此top重新设置成0
                ulist.css({ top: 0 });
            });
        }
        // 开始调用一次
        scroll();
        // 后面每隔2s调用一次
        setInterval(scroll, 2000);
    </script>

转载于今日头条博主：开始study