- 滚动到底部后返回顶部
var rowBack = ()=>{
mTop = (mTop <= -33*7 ? -33 : mTop - 132)
var css = {'margin-top': warnHight};
$('#list').animate(css ,800);
}
setInterval(()=>{
if($('#list').hasClass('table')){
rowBack()
}
},2000)
- 滚动到底部后无缝连续向上循环滚动
参考:https://www.cnblogs.com/hfx123/p/9520732.html
<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>
$(function(){
var height = $("ul").height()
var timing =setInterval(info,2000,height);
$("ul").hover(
function(){clearInterval(timing);},
function(){timing = setInterval(info,2000,height);}
)
})
function info(height){
var li =$("ul>li:eq(0)").clone();
$("ul>li:eq(0)").animate({marginTop:(-height)},2000,function(){
$("ul>li:eq(0)").remove();
$("ul").append(li);
})
}
- 利用jquery的slideDown/slideUp进行滚动
原始节点的内容不显示,设置为display:none,
然后将#list里的节点,按顺序轮换添加到item1或item2,然后交替用slideDown来模拟滚动
<ul style="border: 1px solid blue;height:10px;width:300px;overflow: hidden;">
<li id='item1' style="dislplay:none"></li>
<li id='item2' style="dislplay:none"></li>
</ul>
<ul id='list' style="dislplay:none">
<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>