文字滚动代码(文字滚动代码html)

题目：

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

分析：

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

实现步骤：

基础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="jquery-3.6.0.min.js"></script>调整样式，最终代码如下。

<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>

这步过后，效果如下图：

编写JavaScript代码

定义一个函数scroll()，功能是实现一个列表项的滚动动画，动画时间1

，然后，每间隔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调用一次 tInterval(scroll, 2000); </script>

完工。