HTML:
<div class="box">
<ul>
<li>11111</li>
<li>22222</li>
</ul>
</div>
JQ:
调用:$(function(){
setinterval(functon(){
scroll($(".box ul"));
},1000);
})
封装:function scroll(obj){
var h=obj.find(" li ").height(); //获取每个li的高度
obj.animate({"margin-top":-h},function(){ //整个ul向上滚动一个li的高度,h的正负决定滚动的方向
obj.find("li").eq(0).appendto(obj); //把ul的第一个li放到最后
obj.css("margin-top",0); //ul位置还原,看起来就像是在无缝滚动一样
})
}
说明:如果是上下无缝滚动,就用margin-top;如果是左右滚动就用margin-left,然后是获取每个li的宽度. 封装是为了重复调用的时候,减少代码量。
时间: 2024-10-08 08:16:51