代码如下
<body>
<ul style="border: 1px solid blue;height: 60px;width:300px;overflow: hidden;">
<li>aaaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbbbbb</li>
<li>ccccccccccccccccccccc</li>
<li>ddddddddddddddddddddd</li>
<li>eeeeeeeeeeeeeeeeeeeee</li>
<li>fffffffffffffffffffff</li>
<li>ggggggggggggggggggggg</li>
<li>hhhhhhhhhhhhhhhhhhhhh</li>
</ul>
</body>
< type="text/ ">
$(function(){
//每隔两秒进行一次滚动
setInterval("info()",2000);
})
function info(){
//复制第一个li
var li =$("ul>li:eq(0)").clone();
//使用animate对li的外边距进行调整从而达到向上滚动的效果
$("ul>li:eq(0)").animate({marginTop:"-20px"},2000,function(){
//对已经消失的li进行删除
$("ul>li:eq(0)").remove();
//把复制后的li插入到最后
$("ul").append(li);
})
}
</ >
以上就是全部代码了，这个滚动效果也有取巧的成分在里面，不过不管是黑猫还是白猫能抓到老鼠的就是好猫。
继续阅读与本文标签相同的文章
上一篇 :
计算机视觉技术精选 | 免费资料库
下一篇 :
HTTP URI、URL和URN详细介绍
-
Mybatis源码的9种设计模式
2026-05-18栏目： 教程
-
x86-64 寄存器只有6个寄存器来存参数，那 C 函数为什么还能超过6个参数
2026-05-18栏目： 教程
-
Cassandra压测工具cassandra-stress
2026-05-18栏目： 教程
-
RDS for SQL Serve如何使用OSS备份文件增量上云？
2026-05-18栏目： 教程
-
企业级业务架构的设计难点
2026-05-18栏目： 教程