在使用liMarquee插件的时候,如果列表中插入了新的数据,再次运行liMarquee语句,会导致列表被再次克隆,产生重叠滚动的效果。如果多次重叠会直接让网页崩溃。
//插入元素的语句
$('.wrap').liMarquee({
direction: 'up',/*身上滚动*/
runshort: false,/*内容不足时不滚动*/
scrollamount: 30/*速度*/
});
个人理解,limarquee的原理是把原本的li列表克隆两份,分别衔接在原列表的上下,通过添加滚动样式来实现无缝滚动的效果。如果重复运行limarquee语句,会使被克隆的列表再次被克隆,列表数量会剧增,产生重叠。
在插入语句之后,添加清除limarquee样式的语句。
这里不能用remove直接删除克隆的元素,因为limarquee还给ul增加了滚动速度等效果,这些效果是无法用removeAttr移除的。直接使用remove会使之后的列表滚动速度忽快忽慢。
如果一个页面上有多个滚动的列表,需要单独清除滚动。
//插入元素的语句
for (let i = 7; i <= 10; i++) {
$("#sub_div"+i+" .wrap").liMarquee('destroy');
}
$('.wrap').liMarquee({
direction: 'up',/*身上滚动*/
runshort: false,/*内容不足时不滚动*/
scrollamount: 30/*速度*/
});