HTML JQ+JS实现无限滚动条列表

HTML代码

<ul id="express"><li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li><li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li><li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li><li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li><li><span>【公告】</span><a href="#">家电低至五折</a></li><li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li><li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li><li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li><li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li><li><span>【公告】</span><a href="#">家电低至五折</a></li></ul>

JQ+JS

var margintop=0;var a=0;function one() {if (a===0){$("#express li:first-child").animate({"margin-top":--margintop},0);if ((-margintop)>$("#express li:first-child").height()){$("#express li:first-child").css("margin-top","0").appendTo($("#express"));margintop=0;}}}setInterval(one,50);$("#express li").hover(function () {a=1;},function () {a=0;})

鼠标悬浮至li上可暂停滚动,这样就可以实现无限滚动内容了

该方法运用了animate的方法通过动画的方式来改变第一个li标签的上边距,

等到上边大于该标签的高度时便将其添加至ul的底部,然后将其上边距设置为正常数值

然后接着对另一个标签的上边距做改变

使用hover方法设置悬浮是否停止,设置一个值为0的元素

鼠标悬浮至上时该元素值为1,移开时为0

将其作为if判断值为0时进入动画,值为1时停止动画