liMarquee插件产生的滚动重叠bug

在使用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/*速度*/
});
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值